drop/components/UserHeader.vue

<template>
  <div class="hidden lg:flex bg-zinc-950 flex-row px-12 xl:px-48 py-5">
    <div class="grow inline-flex items-center gap-x-20">
      <NuxtLink to="/">
        <Wordmark class="h-8" />
      </NuxtLink>
      <nav class="inline-flex items-center">
        <ol class="inline-flex items-center gap-x-12">
          <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>
      </nav>
    </div>
    <div class="inline-flex items-center">
      <ol class="inline-flex gap-3">
        <li v-for="(item, itemIdx) in quickActions">
          <HeaderWidget
            @click="item.action"
            :notifications="item.notifications"
          >
            <component class="h-5" :is="item.icon" />
          </HeaderWidget>
        </li>
        <HeaderUserWidget />
      </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> = [
  {
    prefix: "/store",
    route: "/store",
    label: "Store",
  },
  {
    prefix: "/library",
    route: "/library",
    label: "Library",
  },
  {
    prefix: "/community",
    route: "/community",
    label: "Community",
  },
  {
    prefix: "/news",
    route: "/news",
    label: "News",
  },
];

const currentPageIndex = useCurrentNavigationIndex(navigation);

const quickActions: Array<QuickActionNav> = [
  {
    icon: UserGroupIcon,
    action: async () => {},
  },
  {
    icon: BellIcon,
    action: async () => {},
  },
];

const sidebarOpen = ref(false);
router.afterEach(() => (sidebarOpen.value = false));
</script>