Highlight nav link as active for sub-routes too
/sessions/16 (and any other nested route) now underlines its parent nav link instead of only an exact pathname match, which previously left every detail/replay page with no active tab at all. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
This commit is contained in:
@@ -19,6 +19,10 @@ const LINKS = [
|
|||||||
{ href: "/devices", label: "Devices" },
|
{ href: "/devices", label: "Devices" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
function isActive(pathname: string, href: string): boolean {
|
||||||
|
return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
|
||||||
|
}
|
||||||
|
|
||||||
function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
return (
|
return (
|
||||||
@@ -30,7 +34,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
|||||||
onClick={onNavigate}
|
onClick={onNavigate}
|
||||||
className={cn(
|
className={cn(
|
||||||
"border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
|
"border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
|
||||||
pathname === link.href
|
isActive(pathname, link.href)
|
||||||
? "border-primary text-foreground"
|
? "border-primary text-foreground"
|
||||||
: "border-transparent text-muted-foreground hover:text-foreground",
|
: "border-transparent text-muted-foreground hover:text-foreground",
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user