fix: nav order always Producten, Sprint, Solo, Todo's on all pages

Sprint is dimmed when no product is active in the URL.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-26 17:51:51 +02:00
parent abb42a7046
commit bc91e3c169

View file

@ -25,11 +25,13 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
const productMatch = pathname.match(/^\/products\/([^/]+)/)
const productId = productMatch ? productMatch[1] : null
const sprintHref = productId ? `/products/${productId}/sprint` : null
const navLinks = [
{ href: '/dashboard', label: 'Producten', active: pathname.startsWith('/dashboard') || (pathname.startsWith('/products') && !pathname.includes('/solo')), show: true },
{ href: productId ? `/products/${productId}/sprint` : '/dashboard', label: 'Sprint', active: pathname.includes('/sprint'), show: !!productId },
{ href: '/solo', label: 'Solo', active: pathname.includes('/solo'), show: true },
{ href: '/todos', label: "Todo's", active: pathname.startsWith('/todos'), show: true },
{ href: '/dashboard', label: 'Producten', active: pathname.startsWith('/dashboard') || (pathname.startsWith('/products') && !pathname.includes('/solo')) },
{ href: sprintHref, label: 'Sprint', active: pathname.includes('/sprint') },
{ href: '/solo', label: 'Solo', active: pathname.includes('/solo') },
{ href: '/todos', label: "Todo's", active: pathname.startsWith('/todos') },
]
return (
@ -47,20 +49,29 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
{/* Nav links */}
<nav className="flex items-center gap-1 ml-2">
{navLinks.filter(l => l.show).map(link => (
<Link
key={link.label}
href={link.href}
className={cn(
'px-3 py-1.5 rounded-md text-sm transition-colors',
link.active
? 'bg-primary-container text-primary-container-foreground font-medium'
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
)}
>
{link.label}
</Link>
))}
{navLinks.map(link =>
link.href ? (
<Link
key={link.label}
href={link.href}
className={cn(
'px-3 py-1.5 rounded-md text-sm transition-colors',
link.active
? 'bg-primary-container text-primary-container-foreground font-medium'
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
)}
>
{link.label}
</Link>
) : (
<span
key={link.label}
className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-default select-none"
>
{link.label}
</span>
)
)}
</nav>
{/* Rechts: rollen + instellingen + uitloggen */}