janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: center product name in navbar

Browse source 
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>
This commit is contained in:
Janpeter Visser 2026-04-26 18:02:38 +02:00
parent 991e9c0a4b
commit 9a5cc484b7
1 changed files with 59 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

113
components/shared/nav-bar.tsx
View file

@ -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(