From e5cf13fd93785d46aba279c17800ae932ac84cb4 Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Thu, 26 Dec 2024 19:36:40 +1100
Subject: [PATCH] feat(admin ui): mobile nav

---
 layouts/admin.vue | 104 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 76 insertions(+), 28 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index aae898c..52ca79f 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,33 +1,72 @@
 <template>
   <div>
+    <TransitionRoot as="template" :show="sidebarOpen">
+      <Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
+        <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
+          enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
+          leave-to="opacity-0">
+          <div class="fixed inset-0 bg-zinc-900/80" />
+        </TransitionChild>
+
+        <div class="fixed inset-0 flex">
+          <TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
+            enter-from="-translate-x-full" enter-to="translate-x-0"
+            leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
+            leave-to="-translate-x-full">
+            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
+              <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
+                enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
+                <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
+                  <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
+                    <span class="sr-only">Close sidebar</span>
+                    <XMarkIcon class="size-6 text-white" aria-hidden="true" />
+                  </button>
+                </div>
+              </TransitionChild>
+              <!-- Sidebar component, swap this element with another sidebar if you like -->
+              <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-950 px-4 pb-4">
+                <div class="inline-flex items-center py-4 px-4">
+                  <Wordmark class="h-full w-auto" alt="Drop`" />
+                </div>
+                <nav>
+                  <ul role="list" class="grid grid-cols-2 items-stretch gap-4 px-5">
+                    <li v-for="(item, itemIdx) in navigation" :key="item.route">
+                      <NuxtLink :href="item.route" :class="[
+                        itemIdx === currentNavigationIndex
+                          ? 'bg-zinc-900 text-white'
+                          : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
+                        'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
+                      ]">
+                        <component :is="item.icon" class="h-6 w-6 shrink-0" aria-hidden="true" />
+                        <span class="text-xs text-center">{{ item.label }}</span>
+                      </NuxtLink>
+                    </li>
+                  </ul>
+                </nav>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
     <!-- Static sidebar for desktop -->
     <div
-      class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-zinc-950 lg:pb-4"
-    >
+      class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-zinc-950 lg:pb-4">
       <div class="flex flex-col h-24 shrink-0 items-center justify-center">
         <Logo class="h-8 w-auto" />
-        <span
-          class="mt-1 bg-blue-400 px-1 py-0.5 rounded-md text-xs font-bold font-display"
-          >Admin</span
-        >
+        <span class="mt-1 bg-blue-400 px-1 py-0.5 rounded-md text-xs font-bold font-display">Admin</span>
       </div>
       <nav class="mt-8">
         <ul role="list" class="flex flex-col items-stretch space-y-4 mx-2">
           <li v-for="(item, itemIdx) in navigation" :key="item.route">
-            <NuxtLink
-              :href="item.route"
-              :class="[
-                itemIdx === currentNavigationIndex
-                  ? 'bg-zinc-900 text-white'
-                  : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
-                'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
-              ]"
-            >
-              <component
-                :is="item.icon"
-                class="h-6 w-6 shrink-0"
-                aria-hidden="true"
-              />
+            <NuxtLink :href="item.route" :class="[
+              itemIdx === currentNavigationIndex
+                ? 'bg-zinc-900 text-white'
+                : 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
+              'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
+            ]">
+              <component :is="item.icon" class="h-6 w-6 shrink-0" aria-hidden="true" />
               <span class="text-xs text-center">{{ item.label }}</span>
             </NuxtLink>
           </li>
@@ -35,14 +74,8 @@
       </nav>
     </div>
 
-    <div
-      class="sticky top-0 z-40 flex items-center gap-x-6 bg-zinc-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden"
-    >
-      <button
-        type="button"
-        class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
-        @click="sidebarOpen = true"
-      >
+    <div class="sticky top-0 z-40 flex items-center gap-x-6 bg-zinc-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden">
+      <button type="button" class="-m-2.5 p-2.5 text-zinc-400 lg:hidden" @click="sidebarOpen = true">
         <span class="sr-only">Open sidebar</span>
         <Bars3Icon class="h-6 w-6" aria-hidden="true" />
       </button>
@@ -59,6 +92,16 @@
 
 <script setup lang="ts">
 import { ref, type Component } from "vue";
+import {
+  Dialog,
+  DialogPanel,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
 import {
   Bars3Icon,
   ServerStackIcon,
@@ -70,6 +113,7 @@ import {
 import type { NavigationItem } from "~/composables/types";
 import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
 import { ArrowLeftIcon } from "@heroicons/vue/16/solid";
+import { XMarkIcon } from "@heroicons/vue/24/solid";
 
 const navigation: Array<NavigationItem & { icon: Component }> = [
   { label: "Home", route: "/admin", prefix: "/admin", icon: HomeIcon },
@@ -108,6 +152,10 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
 const currentNavigationIndex = useCurrentNavigationIndex(navigation);
 
 const sidebarOpen = ref(false);
+const router = useRouter();
+router.afterEach(() => {
+  sidebarOpen.value = false;
+})
 
 useHead({
   titleTemplate(title) {