first commit

source-code/ERP(B-aa)-管理採購單/src/components/NavigationSidebar.tsx

@@ -0,0 +1,124 @@
+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>
+  );
+}