mirror of
https://github.com/tiennm99/ccs.git
synced 2026-07-16 10:16:49 +00:00
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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user