From 3bc5943028e0c7a1def1ccf8b01f6f7900031f2e Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 24 Apr 2021 20:21:39 -0500
Subject: [PATCH] Trigger mobile nav with css

---
 assets/css/tailwind.css |  13 +++-
 components/navbar.vue   | 130 ++++++++++++++++++++--------------------
 2 files changed, 77 insertions(+), 66 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index ad77e5c..e3e1512 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -70,7 +70,6 @@ html {
     margin: 0;
 }
 
-
 /**
  * Here you would add any custom utilities you need that don't come out of the
  * box with Tailwind.
@@ -160,3 +159,15 @@ html {
         background-position: -100% 0;
     }
 }
+
+
+
+button:focus .parent-focus\:visible,
+button:active .parent-focus\:visible {
+    display: block;
+}
+
+button:focus .parent-focus\:hidden,
+button:active .parent-focus\:hidden {
+    display: none;
+}
diff --git a/components/navbar.vue b/components/navbar.vue
index ef68570..5493020 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -2,49 +2,70 @@
 
     <nav
         :class="[
-            'fixed top-0 left-0 right-0 z-navbar',
-            isOpen ? 'bg-blur' : ''
+            'fixed top-0 left-0 right-0 flex z-navbar'
         ]"
     >
-        <div class="max-w-7xl mx-auto px-4 lg:px-6">
+        <div class="mobile-menu-container flex items-center lg:hidden p-2">
+
+            <!-- Mobile menu button -->
+            <button
+                class="mobile-menu-toggle inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out"
+                aria-label="Main menu"
+            >
+                <!-- Icon when menu is closed. -->
+                <svg
+                    class="parent-focus:hidden h-6 w-6"
+                    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>
+                <!-- Icon when menu is open. -->
+                <svg
+                    class="hidden parent-focus:visible h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M6 18L18 6M6 6l12 12" />
+                </svg>
+
+                <div
+                    :class="[
+                        'mobile-menu hidden parent-focus:visible lg:hidden absolute bg-blur pt-16 top-0 left-0 right-0 w-full',
+                    ]"
+                    style="z-index: -1;"
+                >
+                    <div class="px-2 pt-2 pb-3 lg:px-3">
+                        <a
+                            v-for="(item, index) in items"
+                            :key="index"
+                            :href="item.url"
+                            :class="[
+                                'mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
+                                ($nuxt.$route.path === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700'
+                            ]"
+                        >
+                            {{ item.label }}
+                        </a>
+                    </div>
+                    <hr>
+                </div>
+
+            </button>
+
+        </div>
+
+        <div class="reponsive-menu-container relative w-full max-w-7xl mx-auto lg:px-6">
             <div class="flex justify-between h-16">
                 <div class="flex">
-                    <div class="-ml-2 mr-2 flex items-center lg:hidden">
-                        <!-- Mobile menu button -->
-                        <button
-                            :aria-expanded="isOpen ? 'true' : 'false'"
-                            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out"
-                            aria-label="Main menu"
-                            @click="isOpen = !isOpen"
-                        >
-                            <!-- Icon when menu is closed. -->
-                            <svg
-                                v-if="!isOpen"
-                                class="h-6 w-6"
-                                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>
-                            <!-- Icon when menu is open. -->
-                            <svg
-                                v-if="isOpen"
-                                class="h-6 w-6"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor">
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
                     <div class="flex-shrink-0 flex items-center text-4xl lg:text-5xl py-3">
                         <div>🦾</div>
                     </div>
@@ -103,27 +124,6 @@
 
             Menu open: "block", Menu closed: "hidden"
         -->
-        <div
-            :class="[
-                'lg:hidden',
-                isOpen ? 'block' : 'hidden'
-            ]"
-        >
-            <div class="px-2 pt-2 pb-3 lg:px-3">
-                <a
-                    v-for="(item, index) in items"
-                    :key="index"
-                    :href="item.url"
-                    :class="[
-                        'mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
-                        ($nuxt.$route.path === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700'
-                    ]"
-                >
-                    {{ item.label }}
-                </a>
-            </div>
-            <hr>
-        </div>
     </nav>
 
 </template>
@@ -170,10 +170,10 @@ export default {
             ])
         }
     },
-    data: function () {
-        return {
-            isOpen: false
-        }
-    }
+    // data: function () {
+    //     return {
+    //         // isOpen: false
+    //     }
+    // }
 }
 </script>