- {/* Group header (full mode only) */}
{(collapseState === "full" || isMobile) && (
)}
- {/* Divider in icons mode */}
{collapseState === "icons" && !isMobile && (
)}
@@ -365,6 +383,115 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
+ {/* Group label */}
+ {(collapseState === "full" || isMobile) && (
+
+ {group.label}
+
+ )}
+ {collapseState === "icons" && !isMobile && (
+
+ )}
+
+ {group.items.map((expandItem) => {
+ const isExpanded = expandedGroups.has(expandItem.id);
+ const itemHasActive = expandItem.items.some((sub) => pathname === sub.href || pathname.startsWith(sub.href + "/"));
+ const firstHref = expandItem.items[0]?.href ?? "#";
+ const isGalactic = group.style === "galactic";
+
+ if (collapseState === "icons" && !isMobile) {
+ // Icons mode: show group icon as link
+ return (
+ -
+ setMobileDrawerOpen(false)}
+ className={`flex items-center justify-center px-2 py-2 rounded-md text-sm transition-colors relative group ${
+ itemHasActive
+ ? isGalactic
+ ? "bg-purple-50 text-purple-700 font-semibold dark:bg-purple-900/30 dark:text-purple-300"
+ : "bg-blue-50 text-blue-700 font-semibold dark:bg-blue-900/30 dark:text-blue-300"
+ : isGalactic
+ ? "text-purple-600 hover:bg-purple-50 hover:text-purple-800 dark:text-purple-400 dark:hover:bg-purple-900/20"
+ : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+ }`}
+ title={expandItem.label}
+ >
+ {expandItem.icon}
+
+ {expandItem.label}
+
+
+
+ );
+ }
+
+ // Full mode: GitHub-style expandable item
+ return (
+ -
+
+ {isExpanded && (
+
+ {expandItem.items.map((sub) => {
+ const subActive = pathname === sub.href || pathname.startsWith(sub.href + "/");
+ return (
+ -
+ setMobileDrawerOpen(false)}
+ className={`block pl-10 pr-3 py-1 rounded-md text-[13px] transition-colors ${
+ subActive
+ ? isGalactic
+ ? "bg-purple-50 text-purple-700 font-medium dark:bg-purple-900/30 dark:text-purple-300"
+ : "bg-blue-50 text-blue-700 font-medium dark:bg-blue-900/30 dark:text-blue-300"
+ : "text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+ }`}
+ >
+ {sub.label}
+
+
+ );
+ })}
+
+ )}
+
+ );
+ })}
+
+