new selfhosted version

dashboard/components/NavProjects.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import {
+  Folder,
+  Forward,
+  type LucideIcon,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-vue-next'
+
+defineProps<{
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+}>()
+
+const { isMobile } = useSidebar()
+</script>
+
+<template>
+  <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>
+    <SidebarMenu>
+      <SidebarMenuItem v-for="item in projects" :key="item.name">
+        <SidebarMenuButton as-child>
+          <a :href="item.url">
+            <component :is="item.icon" />
+            <span>{{ item.name }}</span>
+          </a>
+        </SidebarMenuButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuAction show-on-hover>
+              <MoreHorizontal />
+              <span class="sr-only">More</span>
+            </SidebarMenuAction>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent class="w-48 rounded-lg" :side="isMobile ? 'bottom' : 'right'"
+            :align="isMobile ? 'end' : 'start'">
+            <DropdownMenuItem>
+              <Folder class="text-gray-500 dark:text-gray-400" />
+              <span>View Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Forward class="text-gray-500 dark:text-gray-400" />
+              <span>Share Project</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <Trash2 class="text-gray-500 dark:text-gray-400" />
+              <span>Delete Project</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>