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.
This commit is contained in:
Celes Renata
2026-04-15 20:07:31 +00:00
parent 78aee4c9e6
commit c4b90a5224
+7 -1
View File
@@ -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 (
<div key={item.to}>