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:
2026-08-30 20:37:25 +02:00
co-authored by Claude Sonnet 5
parent c4ed849d37
commit d5a8cb81cf
+5 -1
View File
@@ -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",
)} )}