admin ui shell

layouts/admin.vue

@@ -1,2 +1,112 @@
 <template>
-</template>
+  <div>
+    <!-- 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"
+    >
+      <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
+        >
+      </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"
+              />
+              <span class="text-xs text-center">{{ item.label }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </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"
+      >
+        <span class="sr-only">Open sidebar</span>
+        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+      </button>
+    </div>
+
+    <main class="lg:pl-20 min-h-screen bg-zinc-900">
+      <div class="xl:pl-96">
+        <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
+          <!-- Main area -->
+          <NuxtPage />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, type Component } from "vue";
+import {
+  Bars3Icon,
+  ServerStackIcon,
+  HomeIcon,
+  LockClosedIcon,
+  Cog6ToothIcon,
+  FlagIcon,
+} from "@heroicons/vue/24/outline";
+import type { NavigationItem } from "~/composables/types";
+import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
+
+const navigation: Array<NavigationItem & { icon: Component }> = [
+  { label: "Home", route: "/admin", prefix: "/admin", icon: HomeIcon },
+  {
+    label: "Libraries",
+    route: "/admin/libraries",
+    prefix: "/admin/libraries",
+    icon: ServerStackIcon,
+  },
+  {
+    label: "Auth",
+    route: "/admin/auth",
+    prefix: "/admin/auth",
+    icon: LockClosedIcon,
+  },
+  {
+    label: "Feature Flags",
+    route: "/admin/features",
+    prefix: "/admin/features",
+    icon: FlagIcon
+  },
+  {
+    label: "Settings",
+    route: "/admin/settings",
+    prefix: "/admin/settings",
+    icon: Cog6ToothIcon
+  }
+];
+
+const currentNavigationIndex = useCurrentNavigationIndex(navigation);
+
+const sidebarOpen = ref(false);
+
+useHead({
+  titleTemplate(title) {
+    return title ? `${title} | Admin | Drop` : `Admin Dashboard | Drop`;
+  },
+});
+</script>