114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from '@repo/shadcn/collapsible';
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
} from '@repo/shadcn/sidebar';
|
|
import { ChevronRightIcon } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Icons } from './icons';
|
|
// import { useSession } from 'next-auth/react';
|
|
|
|
export function NavMain({
|
|
titleGroup,
|
|
items,
|
|
role
|
|
}: {
|
|
titleGroup: string,
|
|
role: string,
|
|
items: {
|
|
title: string;
|
|
url: string;
|
|
icon?: keyof typeof Icons;
|
|
isActive?: boolean;
|
|
items?: {
|
|
title: string;
|
|
url: string;
|
|
icon?: keyof typeof Icons;
|
|
role?: string[];
|
|
}[];
|
|
}[];
|
|
}) {
|
|
const pathname = usePathname();
|
|
// const { data: session } = useSession();
|
|
|
|
// const userRole = session?.user.role[0]?.rol ? session.user.role[0].rol :'';
|
|
|
|
// console.log(session?.user.role[0]?.rol);
|
|
return (
|
|
<SidebarGroup>
|
|
|
|
<SidebarGroupLabel>{titleGroup}</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
{items.map((item) => {
|
|
const Icon = item.icon ? Icons[item.icon] : Icons.logo;
|
|
return item?.items && item?.items?.length > 0 ? (
|
|
<Collapsible
|
|
key={item.title}
|
|
asChild
|
|
defaultOpen={item.isActive}
|
|
className="group/collapsible"
|
|
>
|
|
<SidebarMenuItem>
|
|
<CollapsibleTrigger asChild>
|
|
<SidebarMenuButton
|
|
tooltip={item.title}
|
|
isActive={pathname === item.url}
|
|
>
|
|
{item.icon && <Icon />}
|
|
<span>{item.title}</span>
|
|
<ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
|
</SidebarMenuButton>
|
|
</CollapsibleTrigger>
|
|
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
{item.items?.map((subItem) => (
|
|
subItem.role?.includes(role) &&
|
|
<SidebarMenuSubItem key={subItem.title}>
|
|
<SidebarMenuSubButton
|
|
asChild
|
|
isActive={pathname === subItem.url}
|
|
>
|
|
<Link href={subItem.url}>
|
|
<span>{subItem.title}</span>
|
|
</Link>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
) : (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton
|
|
asChild
|
|
tooltip={item.title}
|
|
isActive={pathname === item.url}
|
|
>
|
|
<Link href={item.url}>
|
|
<Icon />
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
);
|
|
}
|