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

Enhanced Sidebar to support sub collapsible sections (#80)

Browse Source 
* Enhanced Sidebar to support sub collapsible sections
* Data-Table: support getSortedRowModel
* Add missing renderAction; 
* Fix Sidebar on mobile
* Do not initialize Analytics Provider server side
* Do not bind i18Next until it's initialized
* Avoid infinite redirects in the auth path when Supabase emits a SIGNED_OUT event
* Force admin layout to be dynamic
This commit is contained in:
Giancarlo Buomprisco
2024-11-06 16:01:45 +01:00
committed by GitHub
parent 27ef8f7510
commit 465655fdd4
18 changed files with 322 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -910,18 +910,96 @@ export function SidebarNavigation({
</SidebarGroupAction>
</If>
<ContentContainer>
<SidebarGroupContent>
<SidebarMenu>
{item.children.map((child) => {
const isActive = isRouteActive(
child.path,
currentPath,
child.end,
);
<SidebarGroupContent>
<SidebarMenu>
<ContentContainer>
{item.children.map((child, childIndex) => {
if (child.renderAction) {
return (
<SidebarMenuSubItem key={child.path}>
{child.renderAction}
</SidebarMenuSubItem>
);
}
return (
<SidebarMenuItem key={child.path}>
const Container = (props: React.PropsWithChildren) => {
if ('collapsible' in child && child.collapsible) {
return (
<Collapsible
defaultOpen={!child.collapsed}
className={'group/collapsible'}
>
{props.children}
</Collapsible>
);
}
return props.children;
};
const ContentContainer = (
props: React.PropsWithChildren,
) => {
if ('collapsible' in child && child.collapsible) {
return (
<CollapsibleContent>
{props.children}
</CollapsibleContent>
);
}
return props.children;
};
const TriggerItem = () => {
if ('collapsible' in child && child.collapsible) {
return (
<CollapsibleTrigger asChild>
<SidebarMenuButton tooltip={child.label}>
<div
className={cn('flex items-center gap-2', {
'mx-auto w-full gap-0 [&>svg]:flex-1 [&>svg]:shrink-0':
minimized,
})}
>
{child.Icon}
<span
className={cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0': minimized,
},
)}
>
<Trans
i18nKey={child.label}
defaults={child.label}
/>
</span>
<ChevronDown
className={cn(
'ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-180',
{
'hidden size-0': minimized,
},
)}
/>
</div>
</SidebarMenuButton>
</CollapsibleTrigger>
);
}
const path = 'path' in child ? child.path : '';
const end = 'end' in child ? child.end : false;
const isActive = isRouteActive(
path,
currentPath,
end,
);
return (
<SidebarMenuButton
asChild
isActive={isActive}
@@ -932,10 +1010,9 @@ export function SidebarNavigation({
'mx-auto w-full !gap-0 [&>svg]:flex-1':
minimized,
})}
href={child.path}
href={path}
>
{child.Icon}
<span
className={cn(
'w-auto transition-opacity duration-300',
@@ -951,61 +1028,86 @@ export function SidebarNavigation({
</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 (
<Container key={`group-${index}-${childIndex}`}>
<SidebarMenuItem>
<TriggerItem />
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,
},
)}
<ContentContainer>
<If condition={child.children}>
{(children) => (
<SidebarMenuSub
className={cn({
'mx-0 px-1.5': minimized,
})}
>
{children.map((child) => {
if (child.renderAction) {
return (
<SidebarMenuSubItem
key={child.path}
>
<Trans
i18nKey={child.label}
defaults={child.label}
/>
</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
);
})}
</SidebarMenuSub>
)}
</If>
</SidebarMenuItem>
{child.renderAction}
</SidebarMenuSubItem>
);
}
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>
</ContentContainer>
</SidebarMenuItem>
</Container>
);
})}
</SidebarMenu>
</SidebarGroupContent>
</ContentContainer>
</ContentContainer>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<If condition={minimized && !isLast}>