Dodo
49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible";
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
} from "@/components/ui/sidebar";
|
|
import type { SidebarNavGroup } from "@/components/app-shared";
|
|
import { ChevronRightIcon } from "@/components/ui/phosphor-icons";
|
|
|
|
export function NavGroup({ label, items }: SidebarNavGroup) {
|
|
return (
|
|
<SidebarGroup>
|
|
{label && <SidebarGroupLabel>{label}</SidebarGroupLabel>}
|
|
<SidebarMenu>
|
|
{items.map((item) => (
|
|
<Collapsible className="group/collapsible" defaultOpen={
|
|
!!item.isActive ||
|
|
item.subItems?.some((i) => !!i.isActive)
|
|
} key={item.title} render={<SidebarMenuItem />}>{item.subItems?.length ? (
|
|
<>
|
|
<CollapsibleTrigger render={<SidebarMenuButton isActive={item.isActive} tooltip={item.title} />}>{item.icon}<span>{item.title}</span><ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" /></CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
{item.subItems?.map((subItem) => (
|
|
<SidebarMenuSubItem key={subItem.title}>
|
|
<SidebarMenuSubButton isActive={subItem.isActive} render={<a href={subItem.path} />}>{subItem.icon}<span>{subItem.title}</span></SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</>
|
|
) : (
|
|
<SidebarMenuButton isActive={item.isActive} tooltip={item.title} render={<a href={item.path} />}>{item.icon}<span>{item.title}</span></SidebarMenuButton>
|
|
)}</Collapsible>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
);
|
|
}
|