feat(header): shadcn NavigationMenu replaces hand-rolled dropdowns

Install the shadcn-vue NavigationMenu component family at
src/components/ui/navigation-menu (NavigationMenu / NavigationMenuList
/ NavigationMenuItem / NavigationMenuTrigger / NavigationMenuContent /
NavigationMenuLink / NavigationMenuIndicator / NavigationMenuViewport
+ navigationMenuTriggerStyle cva). Files came in via the registry JSON
(www.shadcn-vue.com/r/styles/default/navigation-menu.json) because the
CLI's corepack pnpm shim conflicts with our nix-managed pnpm — handle
that more cleanly later.

Adds @vueuse/core as a runtime dependency (reactiveOmit /
useForwardProps inside the navigation-menu primitives).

Two upstream fixes applied:

1. NavigationMenuTrigger imports ChevronDown from "@lucide/vue", not
   the deprecated "lucide-vue-next" the registry ships by default.

2. NavigationMenuViewport's height/width CSS variable references use
   Tailwind v3 syntax — h-[--reka-navigation-menu-viewport-height] —
   which renders as a literal string under Tailwind v4, collapsing
   the viewport to 2px. Wrap them in var() so v4 resolves them
   correctly: h-[var(--reka-navigation-menu-viewport-height)].

SiteHeader desktop nav: drop the custom openGroup ref, the
document-level click/keydown listeners and the v-show toggle in
favour of NavigationMenuTrigger + NavigationMenuContent for the four
group dropdowns (Concept / What's On / Collaborate / Reservations),
plus a flat Marketplace link styled with navigationMenuTriggerStyle.
Hover/focus/open states all use bg-muted + text-primary to preserve
the green-bg/gold-text feel from the hand-rolled nav.

Mobile menu stays hand-rolled for this commit; Sheet refactor lands
in a follow-up.

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

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@lucide/vue": "^1.16.0",
     "@vee-validate/zod": "^4.15.1",
+    "@vueuse/core": "^14.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "pinia": "^3.0.4",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@vee-validate/zod':
         specifier: ^4.15.1
         version: 4.15.1(vue@3.5.34(typescript@6.0.3))(zod@3.25.76)
+      '@vueuse/core':
+        specifier: ^14.3.0
+        version: 14.3.0(vue@3.5.34(typescript@6.0.3))
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1

src/components/SiteHeader.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink, useRoute } from 'vue-router'
+import { cn } from '@/lib/utils'
 import cosmicStag from '@/assets/cosmic-stag.avif'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu'
 
 const { t, locale } = useI18n()
 const route = useRoute()
 
-const openGroup = ref<string | null>(null)
 const mobileOpen = ref(false)
-const headerEl = ref<HTMLElement | null>(null)
 
 interface NavItem {
   to: string
@@ -57,12 +65,7 @@ const groups = computed<NavGroup[]>(() => [
   },
 ])
 
-function toggle(id: string) {
+function closeMobile() {
-  openGroup.value = openGroup.value === id ? null : id
-}
-
-function closeAll() {
-  openGroup.value = null
   mobileOpen.value = false
 }
 
@@ -70,35 +73,16 @@ function toggleLocale() {
   locale.value = locale.value === 'fr' ? 'en' : 'fr'
 }
 
-function onClickOutside(e: MouseEvent) {
+watch(() => route.path, closeMobile)
-  if (!headerEl.value) return
-  if (!headerEl.value.contains(e.target as Node)) openGroup.value = null
-}
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') closeAll()
-}
-
-watch(() => route.path, closeAll)
-
-onMounted(() => {
-  document.addEventListener('click', onClickOutside)
-  document.addEventListener('keydown', onKeydown)
-})
-onUnmounted(() => {
-  document.removeEventListener('click', onClickOutside)
-  document.removeEventListener('keydown', onKeydown)
-})
 </script>
 
 <template>
   <header
-    ref="headerEl"
     class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150"
   >
     <div class="mx-auto max-w-7xl px-4 lg:px-6">
       <div class="flex h-16 items-center justify-between gap-4">
-        <RouterLink to="/" class="flex items-center gap-3" @click="closeAll">
+        <RouterLink to="/" class="flex items-center gap-3" @click="closeMobile">
           <img :src="cosmicStag" alt="" class="h-9 w-9 shrink-0" />
           <span class="leading-tight">
             <span class="block font-serif text-base tracking-tight text-foreground">
@@ -110,38 +94,47 @@ onUnmounted(() => {
           </span>
         </RouterLink>
 
-        <nav class="hidden items-center gap-1 lg:flex">
+        <div class="hidden items-center gap-1 lg:flex">
-          <div v-for="g in groups" :key="g.id" class="relative">
+          <NavigationMenu>
-            <button
+            <NavigationMenuList>
-              type="button"
+              <NavigationMenuItem v-for="g in groups" :key="g.id">
-              class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
+                <NavigationMenuTrigger
-              :aria-expanded="openGroup === g.id"
+                  class="bg-transparent hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary data-[state=open]:bg-muted data-[state=open]:text-primary"
-              @click.stop="toggle(g.id)"
                 >
                   {{ g.label }}
-              <span class="ml-1 inline-block text-xs">▾</span>
+                </NavigationMenuTrigger>
-            </button>
+                <NavigationMenuContent>
-            <ul
+                  <ul class="min-w-52 p-1">
-              v-show="openGroup === g.id"
-              class="absolute right-0 top-full z-50 mt-1 min-w-52 rounded-md border border-border bg-popover py-1 shadow-md"
-            >
                     <li v-for="i in g.items" :key="i.to">
+                      <NavigationMenuLink as-child>
                         <RouterLink
                           :to="i.to"
-                  class="block px-4 py-2 text-sm hover:bg-muted"
+                          class="block rounded-sm px-4 py-2 text-sm hover:bg-muted hover:text-primary"
-                  @click="closeAll"
                         >
                           {{ i.label }}
                         </RouterLink>
+                      </NavigationMenuLink>
                     </li>
                   </ul>
-          </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink as-child>
                   <RouterLink
                     to="/marketplace"
-            class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
+                    :class="
+                      cn(
+                        navigationMenuTriggerStyle(),
+                        'bg-transparent hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary',
+                      )
+                    "
                   >
                     {{ t('nav.marketplace') }}
                   </RouterLink>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
           <button
             type="button"
             class="ml-2 rounded-md border border-border px-2 py-1 text-xs uppercase tracking-wider text-muted-foreground hover:bg-muted"
@@ -149,7 +142,7 @@ onUnmounted(() => {
           >
             {{ locale === 'fr' ? 'EN' : 'FR' }}
           </button>
-        </nav>
+        </div>
 
         <button
           type="button"

src/components/ui/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import NavigationMenuViewport from "./NavigationMenuViewport.vue"
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>

src/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>

src/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>

src/components/ui/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from "reka-ui"
+import { NavigationMenuItem } from "reka-ui"
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>

src/components/ui/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
+import {
+  NavigationMenuLink,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>

src/components/ui/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuList, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

src/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "@lucide/vue"
+import {
+  NavigationMenuTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { navigationMenuTriggerStyle } from "."
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>

src/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuViewport,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>

src/components/ui/navigation-menu/index.ts

@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+export { default as NavigationMenu } from "./NavigationMenu.vue"
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
+export { default as NavigationMenuList } from "./NavigationMenuList.vue"
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+)