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

204
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,107 +883,108 @@ export function SidebarNavigation({
</SidebarGroupAction> </SidebarGroupAction>
</If> </If>
<SidebarGroupContent> <ContentContainer>
<SidebarMenu> <SidebarGroupContent>
{item.children.map((child) => { <SidebarMenu>
const isActive = isRouteActive( {item.children.map((child) => {
child.path, const isActive = isRouteActive(
currentPath, child.path,
child.end, currentPath,
); child.end,
);
return ( return (
<SidebarMenuItem key={child.path}> <SidebarMenuItem key={child.path}>
<SidebarMenuButton <SidebarMenuButton
asChild asChild
isActive={isActive} isActive={isActive}
tooltip={child.label} tooltip={child.label}
>
<Link
className={cn('flex items-center', {
'mx-auto w-full !gap-0 [&>svg]:flex-1':
minimized,
})}
href={child.path}
> >
{child.Icon} <Link
className={cn('flex items-center', {
<span 'mx-auto w-full !gap-0 [&>svg]:flex-1':
className={cn( minimized,
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0': minimized,
},
)}
>
<Trans
i18nKey={child.label}
defaults={child.label}
/>
</span>
</Link>
</SidebarMenuButton>
<If condition={child.children}>
{(children) => (
<SidebarMenuSub
className={cn({ 'mx-0 px-1.5': minimized })}
>
{children.map((child) => {
const isActive = isRouteActive(
child.path,
currentPath,
child.end,
);
return (
<SidebarMenuSubItem key={child.path}>
<SidebarMenuSubButton
isActive={isActive}
asChild
>
<Link
className={cn('flex items-center', {
'mx-auto w-full !gap-0 [&>svg]:flex-1':
minimized,
})}
href={child.path}
>
{child.Icon}
<span
className={cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0':
minimized,
},
)}
>
<Trans
i18nKey={child.label}
defaults={child.label}
/>
</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
);
})} })}
</SidebarMenuSub> href={child.path}
)} >
</If> {child.Icon}
</SidebarMenuItem>
); <span
})} className={cn(
</SidebarMenu> 'w-auto transition-opacity duration-300',
</SidebarGroupContent> {
'w-0 opacity-0': minimized,
},
)}
>
<Trans
i18nKey={child.label}
defaults={child.label}
/>
</span>
</Link>
</SidebarMenuButton>
<If condition={child.children}>
{(children) => (
<SidebarMenuSub
className={cn({ 'mx-0 px-1.5': minimized })}
>
{children.map((child) => {
const isActive = isRouteActive(
child.path,
currentPath,
child.end,
);
return (
<SidebarMenuSubItem key={child.path}>
<SidebarMenuSubButton
isActive={isActive}
asChild
>
<Link
className={cn('flex items-center', {
'mx-auto w-full !gap-0 [&>svg]:flex-1':
minimized,
})}
href={child.path}
>
{child.Icon}
<span
className={cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0': minimized,
},
)}
>
<Trans
i18nKey={child.label}
defaults={child.label}
/>
</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
);
})}
</SidebarMenuSub>
)}
</If>
</SidebarMenuItem>
);
})}
</SidebarMenu>
</SidebarGroupContent>
</ContentContainer>
</SidebarGroup> </SidebarGroup>
<If condition={minimized && !isLast}> <If condition={minimized && !isLast}>
<SidebarSeparator /> <SidebarSeparator />
</If> </If>
</Fragment> </Container>
); );
} }
})} })}