bug fixes, half-finished admin ui, and a more

ui/layouts/admin.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { useUser } from '~/composables/useUser'
+const { getUser } = useUser()
+
+definePageMeta({
+    middleware: ["auth", "admin"]
+});
+
+const user = await getUser();
+const route = useRoute();
+
+console.log("setup", route.path)
+
+const accordionMapping = {
+    '/admin': 'item-1',
+    '/admin/config/settings': 'item-2',
+    '/admin/users': '',
+};
+
+const getActiveAccordion = () => {
+    const path = Object.keys(accordionMapping).find(key => route.path === key);
+    return path ? accordionMapping[path] : null;
+};
+
+const isActiveLink = (path: string) => route.path === path;
+</script>
+
+<template>
+    <div class="w-full">
+        <Nav :user="user" />
+        <div class="py-4 px-4 lg:px-8 flex flex-col md:flex-row gap-4">
+            <div class="w-auto md:w-60 flex-shrink-0">
+                <aside class="rounded-md border overflow-hidden w-full h-fit">
+                    <div class="px-4 py-3.5 bg-surface border-b">Admin Settings</div>
+                    <VlAccordion type="single" :defaultValue="getActiveAccordion()">
+                        <VlAccordionItem value="item-1" class="text-sm">
+                            <VlAccordionTrigger class="transition-bg hover:bg-muted/10 px-4 py-3.5">
+                                Maintenance
+                            </VlAccordionTrigger>
+                            <VlAccordionContent class="mt-1 mb-2">
+                                <div class="text-xs">
+                                    <NuxtLink to="/admin"
+                                        class="w-full indent-4 px-4 py-1.5 hover:text-text text-subtle block"
+                                        :class="isActiveLink('/admin') ? 'text-text' : 'text-subtle'">
+                                        Dashboard
+                                    </NuxtLink>
+                                </div>
+                            </VlAccordionContent>
+                        </VlAccordionItem>
+                        <VlAccordionItem value="item-2" class="text-sm">
+                            <VlAccordionTrigger class="transition-bg hover:bg-muted/10 px-4 py-3.5">
+                                Configuration
+                            </VlAccordionTrigger>
+                            <VlAccordionContent class="mt-1 mb-2">
+                                <div class="text-xs">
+                                    <NuxtLink to="/admin/config/settings"
+                                        class="w-full indent-4 px-4 py-1.5 hover:text-text block"
+                                        :class="isActiveLink('/admin/config/settings') ? 'text-text' : 'text-subtle'">
+                                        Settings
+                                    </NuxtLink>
+                                </div>
+                            </VlAccordionContent>
+                        </VlAccordionItem>
+                        <NuxtLink
+                            class="vl-accordion-header focus-visible:outline-none focus-visible:ring focus-visible:ring-inset flex flex-1 justify-between items-center w-full transition-bg px-4 py-3.5 text-sm"
+                            :class="isActiveLink('/admin/users') ? 'bg-muted/15' : 'hover:bg-muted/10'"
+                            to="/admin/users">
+                            Users
+                        </NuxtLink>
+                    </VlAccordion>
+                </aside>
+            </div>
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style>
+.vl-accordion .vl-accordion-item:not(:last-child) {
+    border-bottom-width: 1px;
+}
+</style>