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

80 lines
2.1 KiB
TypeScript

import { Link } from '@inertiajs/react';
import { LayoutGrid, Users, Briefcase, Building2} from 'lucide-react';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import type { NavItem } from '@/types';
import AppLogo from './app-logo';
const mainNavItems: NavItem[] = [
{
title: 'Dashboard',
href: '/dashboard',
icon: LayoutGrid,
},
{
title: 'Manajemen Karyawan',
href: '/admin/employees',
icon: Users,
},
{
title: 'Manajemen Departemen',
href: '/admin/departments',
icon: Building2,
},
{
title: 'Manajemen Jabatan',
href: '/admin/positions',
icon: Briefcase,
},
];
// const footerNavItems: NavItem[] = [
// {
// title: 'Repository',
// href: 'https://github.com/laravel/react-starter-kit',
// icon: Folder,
// },
// {
// title: 'Documentation',
// href: 'https://laravel.com/docs/starter-kits#react',
// icon: BookOpen,
// },
// ];
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} />
</SidebarContent>
<SidebarFooter>
{/* <NavFooter items={footerNavItems} className="mt-auto" /> */}
<NavUser />
</SidebarFooter>
</Sidebar>
);
}