janpeter visser
8017968e60
- Login/register pages met AuthForm (useActionState + useFormStatus) - Server Actions voor login, register, logout met Zod validatie - Middleware checkt session cookie zonder iron-session op Edge runtime - AppLayout met auth-check en NavBar met demo badge en actieve links - Dashboard toont productenlijst via ProductList Client Component - Fix: a-in-a hydration error opgelost door div plus useRouter te gebruiken Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
73 lines
2.3 KiB
TypeScript
73 lines
2.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 { cn } from '@/lib/utils'
|
|
|
|
interface NavBarProps {
|
|
isDemo: boolean
|
|
}
|
|
|
|
export function NavBar({ isDemo }: NavBarProps) {
|
|
const pathname = usePathname()
|
|
|
|
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="/dashboard" className="flex items-center gap-2 font-medium text-foreground">
|
|
<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>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Rechts: instellingen + uitloggen */}
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<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>
|
|
)
|
|
}
|