124 lines
3.4 KiB
TypeScript
124 lines
3.4 KiB
TypeScript
import { ChevronDown, ChevronRight, ShoppingCart, ClipboardList, Users } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { cn } from "./ui/utils";
|
|
|
|
interface MenuItem {
|
|
id: string;
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
children?: MenuItem[];
|
|
}
|
|
|
|
interface NavigationSidebarProps {
|
|
currentPath: string;
|
|
onNavigate: (path: string) => void;
|
|
}
|
|
|
|
export default function NavigationSidebar({
|
|
currentPath,
|
|
onNavigate,
|
|
}: NavigationSidebarProps) {
|
|
const [expandedItems, setExpandedItems] = useState<string[]>(["purchase-management"]);
|
|
|
|
const menuItems: MenuItem[] = [
|
|
{
|
|
id: "purchase-management",
|
|
label: "採購管理",
|
|
icon: <ShoppingCart className="h-5 w-5" />,
|
|
children: [
|
|
{
|
|
id: "purchase-order-management",
|
|
label: "管理採購單",
|
|
icon: <ClipboardList className="h-4 w-4" />,
|
|
}
|
|
],
|
|
},
|
|
];
|
|
|
|
const toggleExpand = (itemId: string) => {
|
|
setExpandedItems((prev) =>
|
|
prev.includes(itemId)
|
|
? prev.filter((id) => id !== itemId)
|
|
: [...prev, itemId]
|
|
);
|
|
};
|
|
|
|
const renderMenuItem = (item: MenuItem, level: number = 0) => {
|
|
const hasChildren = item.children && item.children.length > 0;
|
|
const isExpanded = expandedItems.includes(item.id);
|
|
const isActive = currentPath === item.id;
|
|
|
|
return (
|
|
<div key={item.id}>
|
|
<button
|
|
onClick={() => {
|
|
if (hasChildren) {
|
|
toggleExpand(item.id);
|
|
} else {
|
|
onNavigate(item.id);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"w-full flex items-center gap-2 px-4 py-3 transition-all rounded-md mx-2",
|
|
level === 0 && "hover:bg-background-light",
|
|
level > 0 && "hover:bg-background-light-grey pl-10",
|
|
isActive && "bg-primary-light/20 font-medium"
|
|
)}
|
|
>
|
|
{hasChildren && (
|
|
<span className="flex-shrink-0">
|
|
{isExpanded ? (
|
|
<ChevronDown className="h-4 w-4 text-grey-1" />
|
|
) : (
|
|
<ChevronRight className="h-4 w-4 text-grey-1" />
|
|
)}
|
|
</span>
|
|
)}
|
|
{!hasChildren && level > 0 && <span className="w-4" />}
|
|
{item.icon && (
|
|
<span
|
|
className={cn(
|
|
"flex-shrink-0",
|
|
isActive ? "text-primary-main" : "text-grey-1"
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</span>
|
|
)}
|
|
<span
|
|
className={cn(
|
|
"transition-colors",
|
|
isActive ? "text-primary-main" : "text-grey-0"
|
|
)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</button>
|
|
{hasChildren && isExpanded && (
|
|
<div>
|
|
{item.children?.map((child) => renderMenuItem(child, level + 1))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<aside className="w-64 bg-card border-r border-border h-screen flex flex-col">
|
|
{/* Header */}
|
|
<div className="p-6 border-b border-border">
|
|
<h2 className="text-primary-main">甜點店 ERP 系統</h2>
|
|
</div>
|
|
|
|
{/* Navigation Menu */}
|
|
<nav className="flex-1 overflow-y-auto py-4">
|
|
{menuItems.map((item) => renderMenuItem(item))}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 border-t border-border">
|
|
<p className="caption text-muted-foreground">版本 1.0.0</p>
|
|
</div>
|
|
</aside>
|
|
);
|
|
} |