From 9a5cc484b7ea8ac3e191f7c347f2c93e523a2743 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 26 Apr 2026 18:02:38 +0200
Subject: [PATCH] feat: center product name in navbar

Three-section layout (flex-1 left, center, flex-1 right) keeps
the product name truly centered regardless of sidebar content.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/shared/nav-bar.tsx | 113 ++++++++++++++++++----------------
 1 file changed, 59 insertions(+), 54 deletions(-)

diff --git a/components/shared/nav-bar.tsx b/components/shared/nav-bar.tsx
index 5ca2abc..dcee6ab 100644
--- a/components/shared/nav-bar.tsx
+++ b/components/shared/nav-bar.tsx
@@ -44,47 +44,69 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
   ]
 
   return (
-    <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 gap-4 shrink-0">
-      {/* Logo */}
-      <Link href="/" className="flex items-center gap-2 font-medium text-foreground">
-        <AppIcon size={24} />
-        <span className="text-primary font-semibold">Scrum4Me</span>
-        {isDemo && (
-          <Badge className="bg-warning text-warning-foreground text-xs px-2 py-0">
-            Demo
-          </Badge>
-        )}
-      </Link>
+    <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 shrink-0">
+      {/* Links: logo + nav */}
+      <div className="flex items-center gap-4 flex-1">
+        <Link href="/" className="flex items-center gap-2 font-medium text-foreground">
+          <AppIcon size={24} />
+          <span className="text-primary font-semibold">Scrum4Me</span>
+          {isDemo && (
+            <Badge className="bg-warning text-warning-foreground text-xs px-2 py-0">
+              Demo
+            </Badge>
+          )}
+        </Link>
 
-      {/* Nav links */}
-      <nav className="flex items-center gap-1 ml-2">
-        {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 className="flex items-center gap-1 ml-2">
+          {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>
+      </div>
+
+      {/* Midden: productnaam */}
+      <div className="flex items-center justify-center">
+        {currentProduct && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={
+                <Link
+                  href={`/products/${currentProduct.id}`}
+                  className="text-sm font-medium text-foreground hover:text-primary transition-colors px-2 truncate max-w-[200px]"
+                />
+              }>
+                {currentProduct.name.length > 20
+                  ? currentProduct.name.slice(0, 20) + '…'
+                  : currentProduct.name}
+              </TooltipTrigger>
+              <TooltipContent>{currentProduct.name}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
-      </nav>
+      </div>
 
       {/* Rechts: rollen + instellingen + uitloggen */}
-      <div className="ml-auto flex items-center gap-2">
+      <div className="flex items-center gap-2 flex-1 justify-end">
         {roles.length > 0 && (
           <TooltipProvider>
             <Tooltip>
@@ -97,23 +119,6 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
             </Tooltip>
           </TooltipProvider>
         )}
-        {currentProduct && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger render={
-                <Link
-                  href={`/products/${currentProduct.id}`}
-                  className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 truncate max-w-[160px]"
-                />
-              }>
-                {currentProduct.name.length > 20
-                  ? currentProduct.name.slice(0, 20) + '…'
-                  : currentProduct.name}
-              </TooltipTrigger>
-              <TooltipContent>{currentProduct.name}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
         <Link
           href="/settings"
           className={cn(