77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { ChevronRightIcon, type LucideIcon, PlusCircleIcon } from "lucide-react";
|
|
import { useNavigate } from "react-router";
|
|
|
|
type NavMainItem = {
|
|
title: string;
|
|
url?: string;
|
|
icon?: LucideIcon;
|
|
isActive?: boolean;
|
|
items?: {
|
|
title: string;
|
|
url: string;
|
|
}[];
|
|
};
|
|
|
|
export function NavMain({ items }: { items: NavMainItem[] }) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<SidebarGroup>
|
|
<SidebarGroupContent className="flex flex-col gap-2">
|
|
<SidebarMenu>
|
|
<SidebarMenuItem className="flex items-center gap-2">
|
|
<SidebarMenuButton
|
|
className="hidden min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
|
|
tooltip="Quick Create"
|
|
>
|
|
<PlusCircleIcon />
|
|
<span>Quick Create</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
<SidebarMenu>
|
|
{items.map((item) => (
|
|
<Collapsible asChild className="group/collapsible" defaultOpen={true} key={item.title}>
|
|
<SidebarMenuItem className="mb-6">
|
|
<CollapsibleTrigger asChild>
|
|
<SidebarMenuButton tooltip={item.title}>
|
|
{item.icon && <item.icon />}
|
|
<span className="font-semibold">{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) => (
|
|
<SidebarMenuSubItem key={subItem.title}>
|
|
<SidebarMenuSubButton asChild>
|
|
<a href={subItem.url}>
|
|
<span>{subItem.title}</span>
|
|
</a>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
);
|
|
}
|