import { ChevronDown, ChevronRight, Package, ClipboardList, ShoppingCart } from "lucide-react"; import { Toaster } from "sonner"; import { useState, useEffect } from "react"; import { Link, usePage } from "@inertiajs/react"; import { cn } from "@/lib/utils"; interface MenuItem { id: string; label: string; icon?: React.ReactNode; route?: string; children?: MenuItem[]; } export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) { const { url } = usePage(); const menuItems: MenuItem[] = [ { id: "inventory-management", label: "商品與庫存管理", icon: , children: [ { id: "product-management", label: "商品資料管理", icon: , route: "/products", }, { id: "warehouse-management", label: "倉庫管理", icon: , route: "/warehouses", }, ], }, { id: "vendor-management", label: "廠商管理", icon: , // Using Package icon for now, can be changed children: [ { id: "vendor-list", label: "廠商資料管理", icon: , route: "/vendors", }, ], }, { id: "purchase-management", label: "採購管理", icon: , children: [ { id: "purchase-order-list", label: "管理採購單", icon: , route: "/purchase-orders", }, ], }, ]; // 初始化狀態:優先讀取 localStorage const [expandedItems, setExpandedItems] = useState(() => { try { const saved = localStorage.getItem("sidebar-expanded-items"); if (saved) return JSON.parse(saved); } catch (e) { console.error("Failed to parse sidebar state", e); } // 如果沒有存檔,則預設僅展開當前 URL 對應的群組 const activeItem = menuItems.find(item => item.children?.some(child => child.route && url.startsWith(child.route)) ); return activeItem ? [activeItem.id] : ["inventory-management"]; }); // 監聽 URL 變化,確保「當前」頁面所屬群組是展開的 // 但不要影響其他群組的狀態(除非使用者手動切換) useEffect(() => { const activeItem = menuItems.find(item => item.children?.some(child => child.route && url.startsWith(child.route)) ); if (activeItem && !expandedItems.includes(activeItem.id)) { setExpandedItems(prev => { const next = [...prev, activeItem.id]; localStorage.setItem("sidebar-expanded-items", JSON.stringify(next)); return next; }); } }, [url]); const toggleExpand = (itemId: string) => { setExpandedItems((prev) => { const next = prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]; localStorage.setItem("sidebar-expanded-items", JSON.stringify(next)); return next; }); }; const renderMenuItem = (item: MenuItem, level: number = 0) => { const hasChildren = item.children && item.children.length > 0; const isExpanded = expandedItems.includes(item.id); const isActive = item.route ? url.startsWith(item.route) : false; return (
{hasChildren ? ( ) : ( 0 && "hover:bg-background-light-grey pl-10", isActive && "bg-[#33bc9a]/20 font-medium" )} > {!hasChildren && level > 0 && } {item.icon && ( {item.icon} )} {item.label} )} {hasChildren && isExpanded && (
{item.children?.map((child) => renderMenuItem(child, level + 1))}
)}
); }; return (
{/* Sidebar 底色強制為白色 bg-white */}
{children}
); }