user mobile header

components/HeaderWidget.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="transition inline-flex items-center cursor-pointer rounded-sm px-4 py-2 bg-zinc-900 text-zinc-600 hover:bg-zinc-800 hover:text-zinc-300 relative">
+    <div class="transition inline-flex items-center justify-center cursor-pointer rounded-sm px-4 py-2 bg-zinc-900 text-zinc-600 hover:bg-zinc-800 hover:text-zinc-300 relative">
         <slot />
         <div v-if="props.notifications !== undefined"
             class="text-zinc-900 absolute top-0 right-0 translate-x-[30%] translate-y-[-30%] text-xs bg-blue-300 rounded-full w-3.5 h-3.5 text-center">

components/UserHeader.vue

@@ -33,12 +33,136 @@
       </ol>
     </div>
   </div>
+
+  <div
+    class="sticky lg:hidden top-0 z-40 flex h-16 justify-between items-center gap-x-4 border-b border-zinc-700 bg-zinc-950 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
+  >
+    <Wordmark class="mb-0.5" />
+    <div class="flex gap-x-4 lg:gap-x-6">
+      <div class="flex items-center gap-x-3">
+        <!-- Profile dropdown -->
+        <HeaderUserWidget />
+
+        <button
+          type="button"
+          class="-m-2.5 p-2.5 text-zinc-500 lg:hidden"
+          @click="sidebarOpen = true"
+        >
+          <span class="sr-only">Open sidebar</span>
+          <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  </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="h-6 w-6 text-zinc-400" 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-6 pb-4"
+            >
+              <div class="flex shrink-0 h-16 items-center justify-between">
+                <NuxtLink to="/">
+                  <Logo class="h-8 w-auto" />
+                </NuxtLink>
+
+                <HeaderUserWidget />
+              </div>
+              <nav class="flex flex-1 flex-col gap-y-8">
+                <ol class="flex flex-col gap-y-3">
+                  <NuxtLink
+                    v-for="(nav, navIdx) in navigation"
+                    :href="nav.route"
+                    :class="[
+                      'transition hover:text-zinc-200 uppercase font-display font-semibold text-md',
+                      navIdx === currentPageIndex
+                        ? 'text-zinc-100'
+                        : 'text-zinc-400',
+                    ]"
+                  >
+                    {{ nav.label }}
+                  </NuxtLink>
+                </ol>
+                <div class="h-px w-full bg-zinc-700" />
+                <div class="flex flex-row gap-x-4 justify-stretch">
+                  <li class="w-full" v-for="(item, itemIdx) in quickActions">
+                    <HeaderWidget
+                    class="w-full"
+                      @click="item.action"
+                      :notifications="item.notifications"
+                    >
+                      <component class="h-5" :is="item.icon" />
+                    </HeaderWidget>
+                  </li>
+                </div>
+              </nav>
+            </div>
+          </DialogPanel>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
 </template>
 
 <script setup lang="ts">
 import { BellIcon, UserGroupIcon } from "@heroicons/vue/16/solid";
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
 import type { NavigationItem, QuickActionNav } from "../composables/types";
 import HeaderWidget from "./HeaderWidget.vue";
+import { Bars3Icon } from "@heroicons/vue/24/outline";
+import { XMarkIcon } from "@heroicons/vue/24/solid";
+
+const router = useRouter();
 
 const navigation: Array<NavigationItem> = [
   {
@@ -75,4 +199,7 @@ const quickActions: Array<QuickActionNav> = [
     action: async () => {},
   },
 ];
+
+const sidebarOpen = ref(false);
+router.afterEach(() => (sidebarOpen.value = false));
 </script>