From ce8d91db08ce912896b9ac56124b3b0de5f61bba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paulo=20S=C3=A9rgio=20Dantas?= <contato@paulosdantas.adv.br>
Date: Wed, 1 Jul 2026 01:56:33 -0300
Subject: [PATCH] feat(sidebar): make nav groups collapsible; workspace group
 starts closed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

NavMain gains optional `collapsible` + `defaultOpen` props. When collapsible,
the group label becomes a Collapsible trigger with a rotating chevron; when not
(the default), the group renders exactly as before, always open.

AppSidebar marks the "Workspace" group as `collapsible :default-open="false"` so
it starts closed — with several groups expanded the sidebar competes with the
primary flow for attention. Other groups are unchanged.
---
 resources/js/components/AppSidebar.vue |  2 +-
 resources/js/components/NavMain.vue    | 76 ++++++++++++++++----------
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index d7b66dd7..a88dd0a3 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -238,7 +238,7 @@ const handleCreateWorkspace = () => {
 
             <NavMain v-if="currentWorkspace" :items="mainNavItems" />
             <NavMain v-if="currentWorkspace" :items="postsNavItems" :label="$t('sidebar.groups.posts')" />
-            <NavMain v-if="currentWorkspace && workspaceNavItems.length" :items="workspaceNavItems" :label="$t('sidebar.groups.workspace')" />
+            <NavMain v-if="currentWorkspace && workspaceNavItems.length" :items="workspaceNavItems" :label="$t('sidebar.groups.workspace')" collapsible :default-open="false" />
             <NavSupport v-if="currentWorkspace" :items="supportNavItems" :label="$t('sidebar.groups.others')" />
         </SidebarContent>
 
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index f0cd0acd..07c03fb6 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { IconChevronRight } from '@tabler/icons-vue';
 
 import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import {
     SidebarGroup,
     SidebarGroupLabel,
@@ -12,39 +14,57 @@ import {
 import { useActiveUrl } from '@/composables/useActiveUrl';
 import { type NavItem } from '@/types';
 
-defineProps<{
-    items: NavItem[];
-    label?: string;
-}>();
+withDefaults(
+    defineProps<{
+        items: NavItem[];
+        label?: string;
+        // Collapsible group: the label becomes the trigger (chevron). Without it, always open.
+        collapsible?: boolean;
+        // Initial state when collapsible.
+        defaultOpen?: boolean;
+    }>(),
+    {
+        collapsible: false,
+        defaultOpen: true,
+    },
+);
 
 const { urlIsActive } = useActiveUrl();
 </script>
 
 <template>
     <SidebarGroup class="px-2 py-0">
-        <SidebarGroupLabel v-if="label">
-            {{ label }}
-        </SidebarGroupLabel>
-        <SidebarMenu>
-            <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton
-                    as-child
-                    :is-active="urlIsActive(item.activePattern ?? item.href, { exact: item.exact, exclude: item.excludeActive })"
-                    :tooltip="item.title"
-                >
-                    <Link :href="item.href">
-                        <component :is="item.icon" />
-                        <span>{{ item.title }}</span>
-                    </Link>
-                </SidebarMenuButton>
-                <Badge
-                    v-if="item.badge"
-                    variant="warning"
-                    class="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 px-1.5 group-data-[collapsible=icon]:hidden"
-                >
-                    {{ item.badge }}
-                </Badge>
-            </SidebarMenuItem>
-        </SidebarMenu>
+        <Collapsible :default-open="collapsible ? defaultOpen : true" class="group/collapsible">
+            <SidebarGroupLabel v-if="label" :as-child="collapsible">
+                <CollapsibleTrigger v-if="collapsible" class="flex w-full cursor-pointer items-center">
+                    {{ label }}
+                    <IconChevronRight class="ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+                <span v-else>{{ label }}</span>
+            </SidebarGroupLabel>
+            <CollapsibleContent>
+                <SidebarMenu>
+                    <SidebarMenuItem v-for="item in items" :key="item.title">
+                        <SidebarMenuButton
+                            as-child
+                            :is-active="urlIsActive(item.activePattern ?? item.href, { exact: item.exact, exclude: item.excludeActive })"
+                            :tooltip="item.title"
+                        >
+                            <Link :href="item.href">
+                                <component :is="item.icon" />
+                                <span>{{ item.title }}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                        <Badge
+                            v-if="item.badge"
+                            variant="warning"
+                            class="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 px-1.5 group-data-[collapsible=icon]:hidden"
+                        >
+                            {{ item.badge }}
+                        </Badge>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </CollapsibleContent>
+        </Collapsible>
     </SidebarGroup>
 </template>