zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sidebar: fix collapsible state

Browse Source
This commit is contained in:
gbuomprisco
2024-10-25 20:55:38 +08:00
parent 2209e2988b
commit 681a7c9233
1 changed files with 109 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/ui/src/shadcn/sidebar.tsx
View File

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