dress/resources/js/components/app-sidebar.tsx

62 lines
1.6 KiB
TypeScript

import { Link } from '@inertiajs/react';
import { Boxes, LayoutGrid, List } from 'lucide-react';
import AppLogo from '@/components/app-logo';
import { NavMain } from '@/components/nav-main';
import {
Sidebar,
SidebarContent,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import category from '@/routes/category';
import type { NavItem } from '@/types';
import product from '@/routes/product';
const mainNavItems: NavItem[] = [
{
title: 'Dashboard',
href: dashboard(),
icon: LayoutGrid,
},
];
const masterNavItems: NavItem[] = [
{
title: 'Kategori',
href: category.index().url,
icon: List,
},
{
title: 'Produk',
href: product.index().url,
icon: Boxes,
},
];
export function AppSidebar() {
return (
<Sidebar collapsible="icon" variant="inset">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<Link href={dashboard()} prefetch>
<AppLogo />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<NavMain items={mainNavItems} />
<NavMain items={masterNavItems} label='Master' />
</SidebarContent>
</Sidebar>
);
}