From 12b68f9f136c3529ac976eaec9e8903b43185e89 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Sun, 11 Jan 2026 14:49:41 -0500
Subject: [PATCH] fix(ui): improve sidebar navigation for collapsible menu
 items

- CLIProxy Plus click now navigates to Overview AND opens submenu
- Parent menu item highlights when any child route is active
- Provides consistent visual hierarchy across all collapsible menus
---
 ui/src/components/layout/app-sidebar.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/layout/app-sidebar.tsx b/ui/src/components/layout/app-sidebar.tsx
index bd5b489a..dc5da3b4 100644
--- a/ui/src/components/layout/app-sidebar.tsx
+++ b/ui/src/components/layout/app-sidebar.tsx
@@ -1,4 +1,4 @@
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
   Home,
   Key,
@@ -85,6 +85,7 @@ const navGroups = [
 
 export function AppSidebar() {
   const location = useLocation();
+  const navigate = useNavigate();
   const { state } = useSidebar();
 
   // Helper to check if a route is active (exact match)
@@ -118,8 +119,13 @@ export function AppSidebar() {
                         className="group/collapsible"
                       >
                         <SidebarMenuItem>
+                          {/* Click navigates to overview AND opens submenu */}
                           <CollapsibleTrigger asChild>
-                            <SidebarMenuButton tooltip={item.label}>
+                            <SidebarMenuButton
+                              tooltip={item.label}
+                              isActive={isParentActive(item.children)}
+                              onClick={() => navigate(item.path)}
+                            >
                               {item.icon && <item.icon className="w-4 h-4" />}
                               <span className="group-data-[collapsible=icon]:hidden">
                                 {item.label}