From d5a8cb81cf6c9a278e31dbcc95ecd8956226a801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 30 Aug 2026 20:37:25 +0200 Subject: [PATCH] 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 Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd --- components/layout/NavBar.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/layout/NavBar.tsx b/components/layout/NavBar.tsx index 0deb2df..6e6a4df 100644 --- a/components/layout/NavBar.tsx +++ b/components/layout/NavBar.tsx @@ -19,6 +19,10 @@ const LINKS = [ { href: "/devices", label: "Devices" }, ]; +function isActive(pathname: string, href: string): boolean { + return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`); +} + function NavLinks({ onNavigate }: { onNavigate?: () => void }) { const pathname = usePathname(); return ( @@ -30,7 +34,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) { onClick={onNavigate} className={cn( "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-transparent text-muted-foreground hover:text-foreground", )}