feat: refactor sidebar navigation structure and remove unused components
This commit is contained in:
Yoga Pangestu
parent
c445f3cacc
commit
f3aad51c44
@ -1,34 +1,120 @@
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { LayoutGrid } from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import {
|
||||
Activity,
|
||||
ArrowUpFromLine,
|
||||
BarChart3,
|
||||
Boxes,
|
||||
CalendarCheck,
|
||||
CalendarDays,
|
||||
ClipboardCheck,
|
||||
DollarSign,
|
||||
FileText,
|
||||
HandCoins,
|
||||
LayoutGrid,
|
||||
Package,
|
||||
RefreshCw,
|
||||
Scissors,
|
||||
Settings,
|
||||
ShoppingCart,
|
||||
Tags,
|
||||
Truck,
|
||||
UserCircle,
|
||||
Users,
|
||||
Wallet,
|
||||
} from 'lucide-react';
|
||||
import AppLogo from '@/components/app-logo';
|
||||
import { NavMain } from '@/components/nav-main';
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from '@/components/ui/sidebar';
|
||||
import { useCurrentUrl } from '@/hooks/use-current-url';
|
||||
import { dashboard } from '@/routes';
|
||||
import type { NavItem } from '@/types';
|
||||
|
||||
const mainNavItems: NavItem[] = [
|
||||
{
|
||||
title: 'Dasbor',
|
||||
href: dashboard(),
|
||||
icon: LayoutGrid,
|
||||
},
|
||||
type NavMenuItem = { title: string; href: string; icon: LucideIcon };
|
||||
|
||||
const dasborItem: NavMenuItem = {
|
||||
title: 'Dasbor',
|
||||
href: dashboard.url(),
|
||||
icon: LayoutGrid,
|
||||
};
|
||||
|
||||
const analisaItem: NavMenuItem = {
|
||||
title: 'Analisa',
|
||||
href: '#',
|
||||
icon: BarChart3,
|
||||
};
|
||||
|
||||
const masterItems: NavMenuItem[] = [
|
||||
{ title: 'Kategori', href: '#', icon: Tags },
|
||||
{ title: 'Produk', href: '#', icon: Package },
|
||||
{ title: 'Bahan Baku', href: '#', icon: Boxes },
|
||||
{ title: 'Supplier', href: '#', icon: Truck },
|
||||
{ title: 'Customer', href: '#', icon: Users },
|
||||
];
|
||||
|
||||
const kelolaItems: NavMenuItem[] = [
|
||||
{ title: 'Belanja', href: '#', icon: ShoppingCart },
|
||||
{ title: 'Cutting', href: '#', icon: Scissors },
|
||||
{ title: 'Restock', href: '#', icon: RefreshCw },
|
||||
{ title: 'Stok Opname', href: '#', icon: ClipboardCheck },
|
||||
{ title: 'Pesanan', href: '#', icon: FileText },
|
||||
];
|
||||
|
||||
const keuanganItems: NavMenuItem[] = [
|
||||
{ title: 'Kas Toko', href: '#', icon: Wallet },
|
||||
{ title: 'Pengeluaran', href: '#', icon: ArrowUpFromLine },
|
||||
{ title: 'Kasbon', href: '#', icon: HandCoins },
|
||||
{ title: 'Gaji', href: '#', icon: DollarSign },
|
||||
];
|
||||
|
||||
const sdmItems: NavMenuItem[] = [
|
||||
{ title: 'Pegawai', href: '#', icon: UserCircle },
|
||||
{ title: 'Presensi', href: '#', icon: CalendarCheck },
|
||||
{ title: 'Cuti', href: '#', icon: CalendarDays },
|
||||
];
|
||||
|
||||
const sistemItems: NavMenuItem[] = [
|
||||
{ title: 'Pengaturan', href: '#', icon: Settings },
|
||||
{ title: 'Log Aktivitas', href: '#', icon: Activity },
|
||||
];
|
||||
|
||||
function MenuGroup({ label, items }: { label: string; items: NavMenuItem[] }) {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>{label}</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild tooltip={{ children: item.title }}>
|
||||
<Link href={item.href} prefetch>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppSidebar() {
|
||||
const { isCurrentUrl } = useCurrentUrl();
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon" variant="inset">
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" asChild>
|
||||
<Link href={dashboard()} prefetch>
|
||||
<Link href={dashboard.url()} prefetch>
|
||||
<AppLogo />
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
@ -37,7 +123,37 @@ export function AppSidebar() {
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<NavMain items={mainNavItems} />
|
||||
<SidebarGroup>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild isActive={isCurrentUrl('/dashboard')} tooltip={{ children: dasborItem.title }}>
|
||||
<Link href={dasborItem.href} prefetch>
|
||||
<dasborItem.icon />
|
||||
<span>{dasborItem.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
|
||||
<SidebarGroup>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild tooltip={{ children: analisaItem.title }}>
|
||||
<Link href={analisaItem.href} prefetch>
|
||||
<analisaItem.icon />
|
||||
<span>{analisaItem.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
|
||||
<MenuGroup label="Master" items={masterItems} />
|
||||
<MenuGroup label="Kelola" items={kelolaItems} />
|
||||
<MenuGroup label="Keuangan" items={keuanganItems} />
|
||||
<MenuGroup label="SDM" items={sdmItems} />
|
||||
<MenuGroup label="Sistem" items={sistemItems} />
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
);
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
import type { ComponentPropsWithoutRef } from 'react';
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from '@/components/ui/sidebar';
|
||||
import { toUrl } from '@/lib/utils';
|
||||
import type { NavItem } from '@/types';
|
||||
|
||||
export function NavFooter({
|
||||
items,
|
||||
className,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
|
||||
items: NavItem[];
|
||||
}) {
|
||||
return (
|
||||
<SidebarGroup
|
||||
{...props}
|
||||
className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}
|
||||
>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
|
||||
>
|
||||
<a
|
||||
href={toUrl(item.href)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{item.icon && (
|
||||
<item.icon className="h-5 w-5" />
|
||||
)}
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
import { Link } from '@inertiajs/react';
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem
|
||||
} from '@/components/ui/sidebar';
|
||||
import { useCurrentUrl } from '@/hooks/use-current-url';
|
||||
import type { NavItem } from '@/types';
|
||||
|
||||
export function NavMain({ items = [] }: { items: NavItem[] }) {
|
||||
const { isCurrentUrl } = useCurrentUrl();
|
||||
|
||||
return (
|
||||
<SidebarGroup className="px-2 py-0">
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={isCurrentUrl(item.href)}
|
||||
tooltip={{ children: item.title }}
|
||||
>
|
||||
<Link href={item.href} prefetch>
|
||||
{item.icon && <item.icon />}
|
||||
<span>{item.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user