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:
parent
abb42a7046
commit
bc91e3c169
1 changed files with 29 additions and 18 deletions
|
|
@ -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 */}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue