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
This commit is contained in:
kaitranntt
2026-01-11 14:49:41 -05:00
parent 14f005a742
commit 12b68f9f13
+8 -2
View File
@@ -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}