75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
|
|
export type NavItem = {
|
|
name: string;
|
|
url: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
};
|
|
|
|
export type NavGroup = {
|
|
label: string;
|
|
items: NavItem[];
|
|
};
|
|
|
|
export function NavMain({ items }: { items: (NavGroup | NavItem)[] }) {
|
|
const { url } = usePage();
|
|
|
|
return (
|
|
<>
|
|
{items.map((item) => {
|
|
if ('label' in item) {
|
|
return (
|
|
<SidebarGroup key={item.label}>
|
|
<SidebarGroupLabel>{item.label}</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
{item.items.map((child) => (
|
|
<SidebarMenuItem key={child.name}>
|
|
<SidebarMenuButton
|
|
asChild
|
|
isActive={url === child.url}
|
|
tooltip={child.name}
|
|
>
|
|
<Link href={child.url}>
|
|
<child.icon className="h-4 w-4" />
|
|
<span>{child.name}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SidebarGroup key={item.name}>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
asChild
|
|
isActive={url === item.url}
|
|
tooltip={item.name}
|
|
>
|
|
<Link href={item.url}>
|
|
<item.icon className="h-4 w-4" />
|
|
<span>{item.name}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|