From c4b90a52244244d88459bd40d560146635c72bb5 Mon Sep 17 00:00:00 2001 From: Celes Renata Date: Wed, 15 Apr 2026 20:07:31 +0000 Subject: [PATCH] fix: sidebar nav highlights both Trading Controls and Trading Engine When on /trading/engine, the /trading nav item also matched via startsWith. Now checks if a more specific child route matches first and uses exact match in that case. --- frontend/src/components/AppLayout.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/AppLayout.tsx b/frontend/src/components/AppLayout.tsx index dbcad4a..5c8dfbf 100644 --- a/frontend/src/components/AppLayout.tsx +++ b/frontend/src/components/AppLayout.tsx @@ -70,10 +70,16 @@ export function AppLayout({ children }: { children: ReactNode }) { {navItems.map((item) => { const showGroup = item.group && item.group !== lastGroup; lastGroup = item.group; + // Check if another nav item is a more specific match (child route) + const hasMoreSpecificMatch = navItems.some( + (other) => other.to !== item.to && other.to.startsWith(item.to + '/') && currentPath.startsWith(other.to), + ); const active = item.to === '/' ? currentPath === '/' - : currentPath.startsWith(item.to); + : hasMoreSpecificMatch + ? currentPath === item.to + : currentPath === item.to || currentPath.startsWith(item.to + '/'); return (