feat: 💄 Sub Appsidebar Menu

- Implement submenu component with shadcn-vue styling - Integrate submenu into existing navigation structure

Author: kevinwaxi

resources/js/components/AppSidebar.vue

@@ -14,6 +14,26 @@ const mainNavItems: NavItem[] = [
         href: '/dashboard',
         icon: LayoutGrid,
     },
+    // Example
+    //     {
+    //     title: 'User Management',
+    //     href: '#',
+    //     icon: Shield,
+    //     children: [
+    //       {
+    //         title: 'Roles',
+    //         href: '#',
+    //       },
+    //       {
+    //         title: 'Permissions',
+    //         href: '#',
+    //       },
+    //       {
+    //         title: 'Users',
+    //         href: '#',
+    //       },
+    //     ],
+    //   },
 ];
 
 const footerNavItems: NavItem[] = [
@@ -37,7 +57,7 @@ const footerNavItems: NavItem[] = [
                 <SidebarMenuItem>
                     <SidebarMenuButton size="lg" as-child>
                         <Link :href="route('dashboard')">
-                            <AppLogo />
+                        <AppLogo />
                         </Link>
                     </SidebarMenuButton>
                 </SidebarMenuItem>

resources/js/components/NavMain.vue

@@ -1,30 +1,64 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from '@/components/ui/sidebar'
 import { type NavItem, type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
+import { ChevronRight } from 'lucide-vue-next'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'
 
 defineProps<{
     items: NavItem[];
 }>();
 
 const page = usePage<SharedData>();
+
+function isChildActive(item: { children: any[], href: string }) {
+    return item.children?.some(child => child.href === page.url) || item.href === page.url
+}
 </script>
 
 <template>
     <SidebarGroup class="px-2 py-0">
         <SidebarGroupLabel>Platform</SidebarGroupLabel>
         <SidebarMenu>
-            <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton 
-                    as-child :is-active="item.href === page.url"
-                    :tooltip="item.title"
-                >
-                    <Link :href="item.href">
+            <template v-for="item in items" :key="item.title">
+                <!-- Regular items (no children) -->
+                <SidebarMenuItem v-if="!item.children">
+                    <SidebarMenuButton as-child :is-active="item.href === page.url" :tooltip="item.title">
+                        <Link :href="item.href">
                         <component :is="item.icon" />
                         <span>{{ item.title }}</span>
-                    </Link>
-                </SidebarMenuButton>
-            </SidebarMenuItem>
+                        </Link>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+
+                <!-- Collapsible items (with children) -->
+                <Collapsible v-else :default-open="isChildActive({ children: item.children || [], href: item.href })"
+                    class="group/collapsible">
+                    <SidebarMenuItem>
+                        <CollapsibleTrigger as-child>
+                            <SidebarMenuButton
+                                :is-active="isChildActive({ children: item.children || [], href: item.href })"
+                                :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.children" :key="subItem.title">
+                                    <SidebarMenuSubButton as-child :is-active="subItem.href === page.url">
+                                        <Link :href="subItem.href">
+                                        <span>{{ subItem.title }}</span>
+                                        </Link>
+                                    </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                            </SidebarMenuSub>
+                        </CollapsibleContent>
+                    </SidebarMenuItem>
+                </Collapsible>
+            </template>
         </SidebarMenu>
     </SidebarGroup>
 </template>

resources/js/types/index.d.ts

@@ -16,6 +16,7 @@ export interface NavItem {
     href: string;
     icon?: LucideIcon;
     isActive?: boolean;
+    children?: Array;
 }
 
 export interface SharedData extends PageProps {