71 lines
1.8 KiB
TypeScript
71 lines
1.8 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}>
|
|
<a href={item.url}>
|
|
<item.icon className="h-4 w-4" />
|
|
<span>{item.name}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|