Sidebar: fix collapsible state

packages/ui/src/shadcn/sidebar.tsx

@@ -17,7 +17,11 @@ import { If } from '../makerkit/if';
 import type { SidebarConfig } from '../makerkit/sidebar';
 import { Trans } from '../makerkit/trans';
 import { Button } from './button';
-import { CollapsibleTrigger } from './collapsible';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from './collapsible';
 import { Input } from './input';
 import { Separator } from './separator';
 import { Sheet, SheetContent } from './sheet';
@@ -842,8 +846,17 @@ export function SidebarNavigation({
         }
 
         if ('children' in item) {
+          const Container = item.collapsible ? Collapsible : Fragment;
+          const ContentContainer = item.collapsible
+            ? CollapsibleContent
+            : Fragment;
+
           return (
-            <Fragment key={item.label}>
+            <Container
+              defaultOpen={!item.collapsed}
+              className={'group/collapsible'}
+              key={`collapsible-${index}`}
+            >
               <SidebarGroup key={item.label}>
                 <If
                   condition={item.collapsible}
@@ -870,6 +883,7 @@ export function SidebarNavigation({
                   </SidebarGroupAction>
                 </If>
 
+                <ContentContainer>
                   <SidebarGroupContent>
                     <SidebarMenu>
                       {item.children.map((child) => {
@@ -942,8 +956,7 @@ export function SidebarNavigation({
                                               className={cn(
                                                 'w-auto transition-opacity duration-300',
                                                 {
-                                                'w-0 opacity-0':
-                                                  minimized,
+                                                  'w-0 opacity-0': minimized,
                                                 },
                                               )}
                                             >
@@ -965,12 +978,13 @@ export function SidebarNavigation({
                       })}
                     </SidebarMenu>
                   </SidebarGroupContent>
+                </ContentContainer>
               </SidebarGroup>
 
               <If condition={minimized && !isLast}>
                 <SidebarSeparator />
               </If>
-            </Fragment>
+            </Container>
           );
         }
       })}