From 3c1334b30ef46544406ed3d69fe5481b3b4aff2e Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 16:27:23 +0100
Subject: [PATCH] fix: update sub-navigation item colors for active, hover, and
 default states

---
 web/src/components/layout/app-sidebar.tsx | 44 ++++++++++++-----------
 web/src/components/ui/sidebar.tsx         |  3 +-
 web/src/contexts/navigation-context.tsx   | 16 ++++-----
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/web/src/components/layout/app-sidebar.tsx b/web/src/components/layout/app-sidebar.tsx
index 59a9d14..613e935 100644
--- a/web/src/components/layout/app-sidebar.tsx
+++ b/web/src/components/layout/app-sidebar.tsx
@@ -46,7 +46,7 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
             <SidebarMenuButton
               tooltip={item.title}
               className={cn(
-                "transition-all duration-200 ease-in-out font-medium",
+                "transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
                 item.isActive 
                   ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
                   : "text-muted-foreground hover:text-foreground hover:bg-white/5"
@@ -65,14 +65,17 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
               {item.title}
             </div>
               {item.subItems?.map((subItem) => (
-              <DropdownMenuItem key={subItem.title} asChild>
+              <DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
                 <Link 
                   to={subItem.url}
                   className={cn(
-                    "cursor-pointer py-4 min-h-10",
-                    subItem.isActive && "text-primary bg-primary/10"
+                    "cursor-pointer py-4 min-h-10 flex items-center gap-2",
+                    subItem.isActive 
+                      ? "text-primary bg-primary/10" 
+                      : "text-muted-foreground hover:text-inherit"
                   )}
                 >
+                  <subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/dropitem:text-inherit")} />
                   {subItem.title}
                 </Link>
               </DropdownMenuItem>
@@ -89,20 +92,20 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
       <SidebarMenuItem className="flex flex-col">
         <CollapsibleTrigger asChild>
           <SidebarMenuButton
-            tooltip={item.title}
-            className={cn(
-              "transition-all duration-200 ease-in-out font-medium",
-              item.isActive 
-                ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
-                : "text-muted-foreground hover:text-foreground hover:bg-white/5"
-            )}
-          >
-            <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
-            <span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
-              {item.title}
-            </span>
-            <ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
-          </SidebarMenuButton>
+              tooltip={item.title}
+              className={cn(
+                "transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
+                item.isActive 
+                  ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
+                  : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+              )}
+            >
+              <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
+              <span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
+                {item.title}
+              </span>
+              <ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
+            </SidebarMenuButton>
         </CollapsibleTrigger>
         <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
           <SidebarMenuSub>
@@ -112,13 +115,14 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
                   asChild
                   isActive={subItem.isActive}
                   className={cn(
-                    "transition-all duration-200",
+                    "transition-all duration-200 py-4 min-h-10 group/subitem",
                     subItem.isActive 
                       ? "text-primary bg-primary/10" 
-                      : "text-muted-foreground hover:text-foreground"
+                      : "text-muted-foreground hover:text-inherit"
                   )}
                 >
                   <Link to={subItem.url}>
+                    <subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/subitem:text-inherit")} />
                     <span>{subItem.title}</span>
                   </Link>
                 </SidebarMenuSubButton>
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
index 0ee3201..19ba605 100644
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -686,8 +686,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        "ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",
diff --git a/web/src/contexts/navigation-context.tsx b/web/src/contexts/navigation-context.tsx
index 757bd60..c26c207 100644
--- a/web/src/contexts/navigation-context.tsx
+++ b/web/src/contexts/navigation-context.tsx
@@ -1,10 +1,11 @@
 import * as React from "react"
 import { useLocation, type Location } from "react-router-dom"
-import { Home, Palette, ShieldCheck, Users, Settings, BarChart3, Scroll, type LucideIcon } from "lucide-react"
+import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, type LucideIcon } from "lucide-react"
 
 export interface NavSubItem {
   title: string
   url: string
+  icon: LucideIcon
   isActive?: boolean
 }
 
@@ -43,9 +44,8 @@ const NAV_CONFIG: NavConfigItem[] = [
     url: "/admin", 
     icon: ShieldCheck,
     subItems: [
-      { title: "Overview", url: "/admin/overview" },
-      { title: "Quests", url: "/admin/quests" },
-
+      { title: "Overview", url: "/admin/overview", icon: LayoutDashboard },
+      { title: "Quests", url: "/admin/quests", icon: Trophy },
     ]
   },
   {
@@ -53,10 +53,10 @@ const NAV_CONFIG: NavConfigItem[] = [
     url: "/settings",
     icon: Settings,
     subItems: [
-      { title: "General", url: "/settings/general" },
-      { title: "Economy", url: "/settings/economy" },
-      { title: "Systems", url: "/settings/systems" },
-      { title: "Roles", url: "/settings/roles" },
+      { title: "General", url: "/settings/general", icon: SlidersHorizontal },
+      { title: "Economy", url: "/settings/economy", icon: Coins },
+      { title: "Systems", url: "/settings/systems", icon: Cog },
+      { title: "Roles", url: "/settings/roles", icon: UserCog },
     ]
   },
 ]