104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
|
import { AppIcon } from '@/components/shared/app-icon'
|
|
import { UserMenu } from '@/components/shared/user-menu'
|
|
import { cn } from '@/lib/utils'
|
|
import { useProductStore } from '@/stores/product-store'
|
|
|
|
interface NavBarProps {
|
|
isDemo: boolean
|
|
roles: string[]
|
|
userId: string
|
|
username: string
|
|
email: string | null
|
|
}
|
|
|
|
export function NavBar({ isDemo, roles, userId, username, email }: NavBarProps) {
|
|
const pathname = usePathname()
|
|
const currentProduct = useProductStore(s => s.currentProduct)
|
|
|
|
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')) },
|
|
{ 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 (
|
|
<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 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>
|
|
)}
|
|
</div>
|
|
|
|
{/* Rechts: account-menu */}
|
|
<div className="flex items-center gap-2 flex-1 justify-end">
|
|
<UserMenu userId={userId} username={username} email={email} roles={roles} />
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|