{item.icon}

{item.name}

); } if (!hasChildren) { return (

{item.icon}

{item.name}

{item.badge && ( {item.badge} )} ); } return (

{isExpanded && (

{filteredChildren.map((child) => { const childActive = pathname === child.href; return (

{child.icon}

{child.name} ); })}

)}

); }); interface SidebarContentProps { filteredMenuItems: MenuItem[]; expandedItems: Set; onToggle: (name: string) => void; onClose: () => void; isCollapsed: boolean; onCollapseToggle?: () => void; pathname: string; searchQuery: string; onSearchChange: (v: string) => void; getFilteredChildren: (children?: MenuItem[]) => MenuItem[]; } const SidebarContent = memo(function SidebarContent({ filteredMenuItems, expandedItems, onToggle, onClose, isCollapsed, onCollapseToggle, pathname, searchQuery, onSearchChange, getFilteredChildren, }: SidebarContentProps) { const isItemActive = (item: MenuItem) => { if (pathname === item.href) return true; return item.children?.some((c) => pathname === c.href) ?? false; }; return (

{!isCollapsed && (

AdminHub

Admin Panel

)}

{onCollapseToggle && ( )}

{!isCollapsed && (

onSearchChange(e.target.value)} autoComplete="off" className="block w-full pl-10 pr-8 py-2.5 border border-var-border rounded-xl bg-var-surface focus:ring-2 focus:ring-var-primary focus:border-var-primary text-var-text text-sm transition-all duration-200 placeholder-var-input" /> {searchQuery && ( )}

)}

); }); export default function Sidebar({ isOpen, onClose }: SidebarProps) { const pathname = usePathname(); const [searchQuery, setSearchQuery] = useState(''); const [isCollapsed, setIsCollapsed] = useState(false); const { hasAnyPermission } = usePermissions(); const [expandedItems, setExpandedItems] = useState>(() => { const initial = new Set(); menuStructure.forEach((item) => { if (item.children?.some((c) => pathname === c.href)) { initial.add(item.name); } }); return initial; }); const getFilteredChildren = useCallback( (children: MenuItem[] = []) => children.filter((c) => !c.permissions || hasAnyPermission(c.permissions)), [hasAnyPermission] ); const filteredMenuItems = useMemo(() => { return menuStructure.filter((item) => { if (item.permissions && !hasAnyPermission(item.permissions)) return false; if (searchQuery) { const q = searchQuery.toLowerCase(); const nameMatch = item.name.toLowerCase().includes(q); const childMatch = item.children?.some((c) => c.name.toLowerCase().includes(q)); if (!nameMatch && !childMatch) return false; } return true; }); }, [searchQuery, hasAnyPermission]); const toggleExpanded = useCallback((itemName: string) => { setExpandedItems((prev) => { const next = new Set(prev); if (next.has(itemName)) { next.delete(itemName); } else { next.add(itemName); } return next; }); }, []); const handleCollapseToggle = useCallback(() => { setIsCollapsed((v) => !v); }, []); const sharedProps: Omit = { filteredMenuItems, expandedItems, onToggle: toggleExpanded, onClose, pathname, searchQuery, onSearchChange: setSearchQuery, getFilteredChildren, }; return ( <> {isOpen && ( )}

{isOpen && (

)} ); }