feat(header): shadcn Sheet replaces hand-rolled mobile menu

Install the shadcn-vue Sheet primitives (Sheet / SheetTrigger /
SheetContent / SheetHeader / SheetTitle / SheetDescription /
SheetFooter / SheetClose + the sheetVariants cva) at
src/components/ui/sheet. Files mirrored from the registry JSON to
sidestep the same corepack-pnpm issue that blocks the CLI; X icon
import fixed to @lucide/vue.

SiteHeader: drop the hand-rolled hamburger that toggled a v-show
panel beneath the header, in favour of a Sheet with the hamburger
as SheetTrigger (as-child) and the full nav list as SheetContent
sliding from the right. Sheet handles open-state via v-model:open,
which the route watcher still drives so navigating from the menu
auto-closes the panel. SheetContent runs through a Portal at body
level so the slide animation isn't constrained by the frosted-glass
header.

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

src/components/SiteHeader.vue

@@ -13,6 +13,13 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from '@/components/ui/navigation-menu'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
 
 const { t, locale } = useI18n()
 const route = useRoute()
@@ -144,45 +151,53 @@ watch(() => route.path, closeMobile)
           </button>
         </div>
 
-        <button
-          type="button"
-          class="rounded-md p-2 lg:hidden"
-          :aria-label="t('nav.menu')"
-          :aria-expanded="mobileOpen"
-          @click="mobileOpen = !mobileOpen"
-        >
-          <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
-          <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
-          <span class="block h-0.5 w-6 bg-foreground"></span>
-        </button>
-      </div>
-
-      <div v-show="mobileOpen" class="border-t border-border py-3 lg:hidden">
-        <div v-for="g in groups" :key="g.id" class="py-2">
-          <div
-            class="px-2 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-          >
-            {{ g.label }}
-          </div>
-          <RouterLink
-            v-for="i in g.items"
-            :key="i.to"
-            :to="i.to"
-            class="block rounded-md px-4 py-2 hover:bg-muted"
-          >
-            {{ i.label }}
-          </RouterLink>
-        </div>
-        <RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
-          {{ t('nav.marketplace') }}
-        </RouterLink>
-        <button
-          type="button"
-          class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
-          @click="toggleLocale"
-        >
-          {{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
-        </button>
+        <Sheet v-model:open="mobileOpen">
+          <SheetTrigger as-child>
+            <button
+              type="button"
+              class="rounded-md p-2 lg:hidden"
+              :aria-label="t('nav.menu')"
+            >
+              <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
+              <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
+              <span class="block h-0.5 w-6 bg-foreground"></span>
+            </button>
+          </SheetTrigger>
+          <SheetContent side="right" class="w-full overflow-y-auto sm:max-w-sm">
+            <SheetHeader>
+              <SheetTitle class="font-display uppercase tracking-wider">
+                {{ t('nav.menu') }}
+              </SheetTitle>
+            </SheetHeader>
+            <nav class="mt-6 space-y-4">
+              <div v-for="g in groups" :key="g.id" class="space-y-1">
+                <div
+                  class="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+                >
+                  {{ g.label }}
+                </div>
+                <RouterLink
+                  v-for="i in g.items"
+                  :key="i.to"
+                  :to="i.to"
+                  class="block rounded-md px-4 py-2 hover:bg-muted"
+                >
+                  {{ i.label }}
+                </RouterLink>
+              </div>
+              <RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
+                {{ t('nav.marketplace') }}
+              </RouterLink>
+              <button
+                type="button"
+                class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
+                @click="toggleLocale"
+              >
+                {{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
+              </button>
+            </nav>
+          </SheetContent>
+        </Sheet>
       </div>
     </div>
   </header>

src/components/ui/sheet/Sheet.vue

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

src/components/ui/sheet/SheetClose.vue

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

src/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SheetVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "@lucide/vue"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sheetVariants } from "."
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: SheetVariants["side"]
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

src/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

src/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

src/components/ui/sheet/SheetTrigger.vue

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

src/components/ui/sheet/index.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>