); } // ─── Search Box ─────────────────────────────────────────────────────────────── function SearchBox({ value, onChange, }: { value: string; onChange: (v: string) => void; }) { return (

onChange(e.target.value)} placeholder="Search menu..." aria-label="Search menu" // 16px on touch screens stops iOS from zooming the page on focus. className="bg-transparent outline-none w-full text-base lg:text-xs" style={{ color: "rgba(255,255,255,0.85)", caretColor: "var(--color-cta)" }} /> {value && ( )}

); } // ─── Child Nav Item ─────────────────────────────────────────────────────────── const ChildNavItem = ({ child, pathname, }: { child: ChildItemType; pathname: string; }) => { const isActive = isRouteActive(pathname, child.route, true); const hoverHandlers = useHoverHandlers(isActive); return ( {child.displayName} ); }; // ─── Nav Item ───────────────────────────────────────────────────────────────── const NavItem = ({ item, collapsed, pathname, isExpanded, onToggle, }: { item: NavItemType; collapsed: boolean; pathname: string; isExpanded: boolean; onToggle: (name: string) => void; }) => { const hasChildren = !!item.children?.length; const isDashboard = item.route === "/dashboard"; const isActive = !hasChildren && !!item.route ? isRouteActive(pathname, item.route, isDashboard) : false; // A parent whose child page is open should read as "current" too. const hasActiveChild = hasChildren && item.children!.some(c => isRouteActive(pathname, c.route, true)); const hoverHandlers = useHoverHandlers(isActive); if (collapsed) { const href = hasChildren ? item.children![0].route : item.route!; const isCollapsedActive = hasChildren ? hasActiveChild : isActive; return ( { if (!isCollapsedActive) { e.currentTarget.style.background = "var(--color-sidebar-hover)"; e.currentTarget.style.color = "#ffffff"; } }} onMouseLeave={e => { if (!isCollapsedActive) { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "rgba(255,255,255,0.65)"; } }} > ); } if (hasChildren) { return (

{isExpanded && (

{item.children!.map(child => ( ))}

)}

); } return ( {item.displayName} ); }; // ─── Main Sidebar ───────────────────────────────────────────────────────────── export default function Sidebar() { const pathname = usePathname(); const { hasPermission, permissions, // ← FIX: permissions array bhi lo loading: permissionsLoading, refresh, } = usePermissions(); const { user, sidebarCollapsed, toggleSidebar, userRole } = useAdminStore(); const isDesktop = useIsDesktop(); const mobileOpen = useAdminMobileNav((s) => s.open); const setMobileOpen = useAdminMobileNav((s) => s.setOpen); // The icon-only rail is a desktop affordance; the mobile drawer is always full. const collapsed = sidebarCollapsed && isDesktop; const [expandedItems, setExpandedItems] = useState>( () => computeExpanded(pathname) ); const [search, setSearch] = useState(""); const prevPathnameRef = useRef(pathname); useEffect(() => { if (prevPathnameRef.current === pathname) return; prevPathnameRef.current = pathname; setSearch(""); setExpandedItems(prev => { const next = new Set(prev); computeExpanded(pathname).forEach(name => next.add(name)); return next; }); // Navigating from inside the drawer should dismiss it. setMobileOpen(false); }, [pathname, setMobileOpen]); // Escape closes the drawer; growing past the breakpoint (e.g. rotating a // tablet) also closes it so it can't be left "open" behind the static sidebar. useEffect(() => { if (!mobileOpen) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setMobileOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [mobileOpen, setMobileOpen]); useEffect(() => { if (isDesktop) setMobileOpen(false); }, [isDesktop, setMobileOpen]); useEffect(() => { window.addEventListener("permissions-updated", refresh); return () => window.removeEventListener("permissions-updated", refresh); }, [refresh]); // Permission filter ab section-wise chalta hai, taake empty section // (jiske sab items hide ho gaye) apna heading bhi na dikhaye. const visibleSections = useMemo(() => { if (permissionsLoading) return []; const isSuperAdmin = hasPermission("access:anytime"); if (permissions.length === 0) return []; return NAV_SECTIONS.map(section => { const items = section.items.flatMap(item => { if (isSuperAdmin) return [item]; if (!hasPermission(item.requiredPermission)) return []; if (item.children) { const filteredChildren = item.children.filter(child => hasPermission(child.requiredPermission) ); if (filteredChildren.length === 0) return []; return [{ ...item, children: filteredChildren }]; } return [item]; }); return { ...section, items }; }).filter(section => section.items.length > 0); }, [hasPermission, permissions, permissionsLoading]); const filteredSections = useMemo(() => { const q = search.trim().toLowerCase(); if (!q) return visibleSections; return visibleSections.map(section => { const items = section.items.flatMap(item => { if (item.displayName.toLowerCase().includes(q)) return [item]; if (item.children) { const matched = item.children.filter(child => child.displayName.toLowerCase().includes(q) ); if (matched.length > 0) return [{ ...item, children: matched }]; } return []; }); return { ...section, items }; }).filter(section => section.items.length > 0); }, [visibleSections, search]); const displayExpandedItems = useMemo(() => { if (!search.trim()) return expandedItems; const next = new Set(expandedItems); filteredSections.forEach(section => { section.items.forEach(item => { if (item.children) next.add(item.name); }); }); return next; }, [search, filteredSections, expandedItems]); const toggleExpand = useCallback((itemName: string) => { setExpandedItems(prev => { const next = new Set(prev); if (next.has(itemName)) { next.delete(itemName); } else { next.add(itemName); } return next; }); }, []); const userInitials = user?.firstName && user?.lastName ? `${user.firstName[0]}${user.lastName[0]}`.toUpperCase() : user?.firstName?.[0]?.toUpperCase() || "U"; // Below `lg` the aside is fixed and slides in from the left (`translate-x`), // above it it's a normal flex child whose width is the collapsed/expanded // rail. `h-dvh` (not `h-screen`) so mobile browser chrome doesn't push the // footer/collapse button off-screen. const asideClass = "flex flex-col h-dvh shrink-0 transition-[transform,width] duration-300 " + "fixed inset-y-0 left-0 z-50 w-70 max-w-[85vw] " + "lg:static lg:z-auto lg:max-w-none " + (mobileOpen ? "translate-x-0 " : "-translate-x-full ") + "lg:translate-x-0 " + (collapsed ? "lg:w-18" : "lg:w-65"); const asideStyle = { background: "var(--color-sidebar)", borderRight: "1px solid rgba(255,255,255,0.08)", }; const backdrop = mobileOpen && !isDesktop && (

setMobileOpen(false)} aria-hidden="true" /> ); if (permissionsLoading) { return ( ); } const hasAnyVisibleItem = filteredSections.length > 0; return ( <> {backdrop}

{/* Logo */}

{!collapsed && (

DesiCart Admin

{`${userRole.role ?? ""}`}

)} {/* Drawer close — mobile only */}

{/* Collapsed avatar */} {collapsed && user && (

{userInitials}

)} {/* Nav — a click on any link inside also closes the mobile drawer, even when it points at the page you're already on (no pathname change). */}

{ if ((e.target as HTMLElement).closest("a")) setMobileOpen(false); }} > {!collapsed && ( )} {hasAnyVisibleItem ? ( filteredSections.map((section, idx) => (

{!collapsed && ( )} {collapsed && }

{section.items.map(item => ( ))}

)) ) : ( !collapsed && search && (

No menu found for
{search}

) )}

{/* Collapse toggle — desktop only (the drawer has its own close button) */}

); }