103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { logoutAction } from '@/actions/auth'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { AppIcon } from '@/components/shared/app-icon'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const ROLE_LABELS: Record<string, string> = {
|
|
PRODUCT_OWNER: 'PO',
|
|
SCRUM_MASTER: 'SM',
|
|
DEVELOPER: 'Dev',
|
|
}
|
|
|
|
interface NavBarProps {
|
|
isDemo: boolean
|
|
roles: string[]
|
|
}
|
|
|
|
export function NavBar({ isDemo, roles }: NavBarProps) {
|
|
const pathname = usePathname()
|
|
|
|
const productMatch = pathname.match(/^\/products\/([^/]+)/)
|
|
const productId = productMatch ? productMatch[1] : null
|
|
|
|
const navLinks = [
|
|
{ href: '/dashboard', label: 'Producten' },
|
|
{ href: '/todos', label: "Todo's" },
|
|
]
|
|
|
|
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>
|
|
|
|
{/* Nav links */}
|
|
<nav className="flex items-center gap-1 ml-2">
|
|
{navLinks.map(link => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={cn(
|
|
'px-3 py-1.5 rounded-md text-sm transition-colors',
|
|
pathname.startsWith(link.href)
|
|
? 'bg-primary-container text-primary-container-foreground font-medium'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
|
|
)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
{productId && (
|
|
<Link
|
|
href={`/products/${productId}/sprint`}
|
|
className={cn(
|
|
'px-3 py-1.5 rounded-md text-sm transition-colors',
|
|
pathname.includes('/sprint')
|
|
? 'bg-primary-container text-primary-container-foreground font-medium'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
|
|
)}
|
|
>
|
|
Sprint
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
|
|
{/* Rechts: rollen + instellingen + uitloggen */}
|
|
<div className="ml-auto flex items-center gap-2">
|
|
{roles.length > 0 && (
|
|
<span className="text-xs text-muted-foreground px-2">
|
|
{roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
|
|
</span>
|
|
)}
|
|
<Link
|
|
href="/settings"
|
|
className={cn(
|
|
'px-3 py-1.5 rounded-md text-sm transition-colors',
|
|
pathname.startsWith('/settings')
|
|
? 'bg-primary-container text-primary-container-foreground font-medium'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
|
|
)}
|
|
>
|
|
Instellingen
|
|
</Link>
|
|
<form action={logoutAction}>
|
|
<Button variant="ghost" size="sm" type="submit" className="text-muted-foreground hover:text-foreground">
|
|
Uitloggen
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|