feat(PBI-80): NavBar demo-fork + URL-derived actief product (ST-1346)

Demo: product-switch in de NavBar navigeert direct via router.push zonder
setActiveProductAction. Voor de weergave (label + dropdown-highlight +
nav-links) leiden we voor demo de actieve product af uit pathname, zodat
de UI consistent is met de URL — de server-render houdt de seed-default
prop maar die wordt voor demo overschreven.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/shared/nav-bar.tsx

@@ -49,7 +49,19 @@ export function NavBar({
   const router = useRouter()
   const [isPending, startTransition] = useTransition()
 
+  const urlProductId = pathname.match(/^\/products\/([^/]+)/)?.[1] ?? null
+  const displayActive =
+    isDemo && urlProductId
+      ? products.find(p => p.id === urlProductId) ?? activeProduct
+      : activeProduct
+  const activeId = displayActive?.id ?? null
+
   function handleSwitchProduct(productId: string) {
+    if (productId === displayActive?.id) return
+    if (isDemo) {
+      router.push(`/products/${productId}`)
+      return
+    }
     startTransition(async () => {
       const result = await setActiveProductAction(productId)
       if (result?.error) {
@@ -62,8 +74,6 @@ export function NavBar({
     })
   }
 
-  const activeId = activeProduct?.id ?? null
-
   // Nav link helpers
   const disabledSpan = (label: string) => (
     <span
@@ -153,7 +163,7 @@ export function NavBar({
 
       {/* Midden: actief product */}
       <div className="flex items-center justify-center">
-        {activeProduct ? (
+        {displayActive ? (
           <DropdownMenu>
             <DropdownMenuTrigger
               disabled={isPending}
@@ -161,9 +171,9 @@ export function NavBar({
               className="flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
             >
               <span className="truncate max-w-[180px]">
-                {activeProduct.name.length > 22
-                  ? activeProduct.name.slice(0, 22) + '…'
-                  : activeProduct.name}
+                {displayActive.name.length > 22
+                  ? displayActive.name.slice(0, 22) + '…'
+                  : displayActive.name}
               </span>
               <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
             </DropdownMenuTrigger>
@@ -171,9 +181,9 @@ export function NavBar({
               {products.map(p => (
                 <DropdownMenuItem
                   key={p.id}
-                  onClick={() => p.id !== activeProduct.id && handleSwitchProduct(p.id)}
+                  onClick={() => p.id !== displayActive.id && handleSwitchProduct(p.id)}
                   className={cn(
-                    p.id === activeProduct.id && 'bg-primary-container text-primary-container-foreground font-medium'
+                    p.id === displayActive.id && 'bg-primary-container text-primary-container-foreground font-medium'
                   )}
                 >
                   <span className="truncate">{p.name}</span>