more prominent sidebar sections

src/app/navigation.tsx

@@ -11,26 +11,26 @@ import {
 export const rootNavItems: SidebarNavItem[] = [
     {
         title: "Home",
-        href: "/"
+        href: "/",
-        // icon: <Home className="h-4 w-4" />
+        icon: <Home className="h-4 w-4" />
     }
 ];
 
 export const orgNavItems: SidebarNavItem[] = [
     {
         title: "Sites",
-        href: "/{orgId}/settings/sites"
+        href: "/{orgId}/settings/sites",
-        // icon: <Combine className="h-4 w-4" />
+        icon: <Combine className="h-4 w-4" />
     },
     {
         title: "Resources",
-        href: "/{orgId}/settings/resources"
+        href: "/{orgId}/settings/resources",
-        // icon: <Waypoints className="h-4 w-4" />
+        icon: <Waypoints className="h-4 w-4" />
     },
     {
         title: "Access Control",
         href: "/{orgId}/settings/access",
-        // icon: <Users className="h-4 w-4" />,
+        icon: <Users className="h-4 w-4" />,
         autoExpand: true,
         children: [
             {
@@ -51,20 +51,20 @@ export const orgNavItems: SidebarNavItem[] = [
     },
     {
         title: "Shareable Links",
-        href: "/{orgId}/settings/share-links"
+        href: "/{orgId}/settings/share-links",
-        // icon: <LinkIcon className="h-4 w-4" />
+        icon: <LinkIcon className="h-4 w-4" />
     },
     {
         title: "Settings",
-        href: "/{orgId}/settings/general"
+        href: "/{orgId}/settings/general",
-        // icon: <Settings className="h-4 w-4" />
+        icon: <Settings className="h-4 w-4" />
     }
 ];
 
 export const adminNavItems: SidebarNavItem[] = [
     {
         title: "All Users",
-        href: "/admin/users"
+        href: "/admin/users",
-        // icon: <Users className="h-4 w-4" />
+        icon: <Users className="h-4 w-4" />
     }
 ];

src/components/SidebarNav.tsx

@@ -35,26 +35,6 @@ export function SidebarNav({
     const userId = params.userId as string;
     const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
 
-    // Initialize expanded items based on autoExpand property
-    useEffect(() => {
-        const autoExpanded = new Set<string>();
-
-        function findAutoExpanded(items: SidebarNavItem[]) {
-            items.forEach(item => {
-                const hydratedHref = hydrateHref(item.href);
-                if (item.autoExpand) {
-                    autoExpanded.add(hydratedHref);
-                }
-                if (item.children) {
-                    findAutoExpanded(item.children);
-                }
-            });
-        }
-
-        findAutoExpanded(items);
-        setExpandedItems(autoExpanded);
-    }, [items]);
-
     function hydrateHref(val: string): string {
         return val
             .replace("{orgId}", orgId)
@@ -63,6 +43,34 @@ export function SidebarNav({
             .replace("{userId}", userId);
     }
 
+    // Initialize expanded items based on autoExpand property and current path
+    useEffect(() => {
+        const autoExpanded = new Set<string>();
+
+        function findAutoExpandedAndActivePath(items: SidebarNavItem[], parentHrefs: string[] = []) {
+            items.forEach(item => {
+                const hydratedHref = hydrateHref(item.href);
+                
+                // Add current item's href to the path
+                const currentPath = [...parentHrefs, hydratedHref];
+                
+                // Auto expand if specified or if this item or any child is active
+                if (item.autoExpand || pathname.startsWith(hydratedHref)) {
+                    // Expand all parent sections when a child is active
+                    currentPath.forEach(href => autoExpanded.add(href));
+                }
+                
+                // Recursively check children
+                if (item.children) {
+                    findAutoExpandedAndActivePath(item.children, currentPath);
+                }
+            });
+        }
+
+        findAutoExpandedAndActivePath(items);
+        setExpandedItems(autoExpanded);
+    }, [items, pathname]);
+
     function toggleItem(href: string) {
         setExpandedItems(prev => {
             const newSet = new Set(prev);
@@ -86,41 +94,49 @@ export function SidebarNav({
             return (
                 <div key={hydratedHref}>
                     <div className="flex items-center group" style={{ marginLeft: `${indent}px` }}>
-                        <Link
+                        <div
-                            href={hydratedHref}
                             className={cn(
-                                "flex items-center py-1 w-full transition-colors",
+                                "flex items-center w-full transition-colors rounded-md",
-                                isActive
+                                isActive && level === 0 && "bg-primary/10",
-                                    ? "text-primary font-medium"
+                                "group-hover:bg-muted"
-                                    : "text-muted-foreground hover:text-foreground",
-                                disabled && "cursor-not-allowed opacity-60"
                             )}
-                            onClick={(e) => {
-                                if (disabled) {
-                                    e.preventDefault();
-                                } else if (onItemClick) {
-                                    onItemClick();
-                                }
-                            }}
-                            tabIndex={disabled ? -1 : undefined}
-                            aria-disabled={disabled}
                         >
-                            {item.icon && <span className="mr-2">{item.icon}</span>}
+                            <Link
-                            {item.title}
+                                href={hydratedHref}
-                        </Link>
+                                className={cn(
-                        {hasChildren && (
+                                    "flex items-center w-full px-3 py-2",
-                            <button
+                                    isActive
-                                onClick={() => toggleItem(hydratedHref)}
+                                        ? "text-primary font-medium"
-                                className="p-2 hover:bg-muted rounded-md ml-auto"
+                                        : "text-muted-foreground group-hover:text-foreground",
-                                disabled={disabled}
+                                    disabled && "cursor-not-allowed opacity-60"
-                            >
-                                {isExpanded ? (
-                                    <ChevronDown className="h-4 w-4" />
-                                ) : (
-                                    <ChevronRight className="h-4 w-4" />
                                 )}
-                            </button>
+                                onClick={(e) => {
-                        )}
+                                    if (disabled) {
+                                        e.preventDefault();
+                                    } else if (onItemClick) {
+                                        onItemClick();
+                                    }
+                                }}
+                                tabIndex={disabled ? -1 : undefined}
+                                aria-disabled={disabled}
+                            >
+                                {item.icon && <span className="mr-3 opacity-70">{item.icon}</span>}
+                                {item.title}
+                            </Link>
+                            {hasChildren && (
+                                <button
+                                    onClick={() => toggleItem(hydratedHref)}
+                                    className="p-2 rounded-md opacity-70 hover:opacity-100"
+                                    disabled={disabled}
+                                >
+                                    {isExpanded ? (
+                                        <ChevronDown className="h-4 w-4" />
+                                    ) : (
+                                        <ChevronRight className="h-4 w-4" />
+                                    )}
+                                </button>
+                            )}
+                        </div>
                     </div>
                     {hasChildren && isExpanded && (
                         <div className="space-y-1 mt-1">
@@ -135,7 +151,7 @@ export function SidebarNav({
     return (
         <nav
             className={cn(
-                "flex flex-col space-y-1",
+                "flex flex-col space-y-2",
                 disabled && "pointer-events-none opacity-60",
                 className
             )}