new selfhosted version

dashboard/components/NavMain.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/components/ui/sidebar'
+import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
+
+defineProps<{
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string,
+      active?: boolean | Ref<boolean>
+    }[]
+  }[]
+}>()
+</script>
+
+<template>
+  <SidebarGroup>
+    <SidebarGroupLabel>Platform</SidebarGroupLabel>
+    <SidebarMenu>
+      <Collapsible v-for="item in items" :key="item.title" as-child :default-open="item.isActive"
+        class="group/collapsible">
+        <SidebarMenuItem>
+          <CollapsibleTrigger as-child>
+            <SidebarMenuButton :tooltip="item.title">
+              <component :is="item.icon" v-if="item.icon" />
+              <span>{{ item.title }}</span>
+              <ChevronRight
+                class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <SidebarMenuSub>
+              <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                <SidebarMenuSubButton as-child>
+                  <NuxtLink :to="subItem.url">
+                    <span :class="{ 'text-blue-300': unref(subItem.active) }">{{ subItem.title }}</span>
+                  </NuxtLink>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </SidebarMenuItem>
+      </Collapsible>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>