mirror of
https://github.com/tiennm99/ccs.git
synced 2026-09-10 02:17:11 +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 {
|
import {
|
||||||
Home,
|
Home,
|
||||||
Key,
|
Key,
|
||||||
@@ -85,6 +85,7 @@ const navGroups = [
|
|||||||
|
|
||||||
export function AppSidebar() {
|
export function AppSidebar() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
const { state } = useSidebar();
|
const { state } = useSidebar();
|
||||||
|
|
||||||
// Helper to check if a route is active (exact match)
|
// Helper to check if a route is active (exact match)
|
||||||
@@ -118,8 +119,13 @@ export function AppSidebar() {
|
|||||||
className="group/collapsible"
|
className="group/collapsible"
|
||||||
>
|
>
|
||||||
<SidebarMenuItem>
|
<SidebarMenuItem>
|
||||||
|
{/* Click navigates to overview AND opens submenu */}
|
||||||
<CollapsibleTrigger asChild>
|
<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" />}
|
{item.icon && <item.icon className="w-4 h-4" />}
|
||||||
<span className="group-data-[collapsible=icon]:hidden">
|
<span className="group-data-[collapsible=icon]:hidden">
|
||||||
{item.label}
|
{item.label}
|
||||||
|
|||||||
Reference in New Issue
Block a user