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:
@@ -70,10 +70,16 @@ export function AppLayout({ children }: { children: ReactNode }) {
|
|||||||
{navItems.map((item) => {
|
{navItems.map((item) => {
|
||||||
const showGroup = item.group && item.group !== lastGroup;
|
const showGroup = item.group && item.group !== lastGroup;
|
||||||
lastGroup = item.group;
|
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 =
|
const active =
|
||||||
item.to === '/'
|
item.to === '/'
|
||||||
? currentPath === '/'
|
? currentPath === '/'
|
||||||
: currentPath.startsWith(item.to);
|
: hasMoreSpecificMatch
|
||||||
|
? currentPath === item.to
|
||||||
|
: currentPath === item.to || currentPath.startsWith(item.to + '/');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={item.to}>
|
<div key={item.to}>
|
||||||
|
|||||||
Reference in New Issue
Block a user