From bc91e3c169f5d920ee3bec04259829814f611eff Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 26 Apr 2026 17:51:51 +0200
Subject: [PATCH] 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>
---
 components/shared/nav-bar.tsx | 47 +++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/components/shared/nav-bar.tsx b/components/shared/nav-bar.tsx
index 7d90886..adeca44 100644
--- a/components/shared/nav-bar.tsx
+++ b/components/shared/nav-bar.tsx
@@ -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 */}