From b8c49b7295abb37559c0610ba1fa98b4cb430b69 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 9 Sep 2020 12:24:40 +0100
Subject: [PATCH] Add mobile navigation menu

Fixes #1
---
 src/components/navbar.vue | 48 +++++++++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 5572328..dcdb3fa 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -2,11 +2,27 @@
   <div class="bg-black">
     <div class="max-w-6xl mx-auto py-6 px-4">
         <div class="flex justify-between">
-          <div>
+          <div class="w-1/2 flex items-center">
             <a class="text-white font-bold" href="#" v-text="name"></a>
           </div>
 
-          <nav class="space-x-6">
+          <div class="w-1/2 flex justify-end md:hidden">
+            <button class="text-white focus:text-yellow" type="button" @click="isOpen = !isOpen">
+              <span class="sr-only">Toggle mobile nav</span>
+
+              <svg
+                class="h-8 w-8"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+
+          <nav class="hidden space-x-6 md:block">
             <a
               class="
                 text-xs font-bold uppercase
@@ -16,8 +32,8 @@
               href="#"
               v-for="(link, i) in links"
               :class="{
-                'text-yellow': link.isActive,
-                'text-white': !link.isActive
+                'text-white': !link.isActive,
+                'text-yellow': link.isActive
               }"
               :key="i"
             >
@@ -26,6 +42,27 @@
           </nav>
         </div>
     </div>
+
+    <div :class="{ hidden: !isOpen }" class="absolute w-full bg-black md:hidden">
+      <nav class="py-3 border-white border-t">
+        <a
+          class="
+            px-4 py-3 block 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>
 </template>
 
@@ -46,7 +83,8 @@ export default {
         { text: 'Home', isActive: true },
         { text: 'Talks', isActive: false },
         { text: 'Contact', isActive: false }
-      ]
+      ],
+      isOpen: false
     }
   }
 }