feat: ST-006-ST-008 auth pages, middleware, nav shell en dashboard

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

components/shared/nav-bar.tsx

@@ -0,0 +1,73 @@
+'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>
+  )
+}