From 08edea3c50d843544a3635cc50de8db10d2b6436 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 8 Sep 2020 20:02:56 +0100
Subject: [PATCH] Add navbar component

---
 src/App.vue               |  7 +++++-
 src/components/navbar.vue | 53 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/components/navbar.vue

diff --git a/src/App.vue b/src/App.vue
index f1d2fbd..a04eb95 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,19 @@
 <template>
   <div id="app" class="text-black">
-    {{ title }}
+    <navbar :name="title" />
   </div>
 </template>
 
 <script>
+import Navbar from '@/components/navbar'
 
 export default {
   name: 'App',
 
+  components: {
+    Navbar
+  },
+
   data() {
     return {
       title: 'Bristol JS'
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
new file mode 100644
index 0000000..5572328
--- /dev/null
+++ b/src/components/navbar.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="bg-black">
+    <div class="max-w-6xl mx-auto py-6 px-4">
+        <div class="flex justify-between">
+          <div>
+            <a class="text-white font-bold" href="#" v-text="name"></a>
+          </div>
+
+          <nav class="space-x-6">
+            <a
+              class="
+                text-xs font-bold uppercase
+                hover:text-yellow
+                focus:text-yellow
+              "
+              href="#"
+              v-for="(link, i) in links"
+              :class="{
+                'text-yellow': link.isActive,
+                'text-white': !link.isActive
+              }"
+              :key="i"
+            >
+              {{ link.text }}
+            </a>
+          </nav>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Navbar',
+
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      links: [
+        { text: 'Home', isActive: true },
+        { text: 'Talks', isActive: false },
+        { text: 'Contact', isActive: false }
+      ]
+    }
+  }
+}
+</script>