From 35bec04fd22ec6518dbfcaa9e2042443ae0e801a Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 9 Jun 2026 23:50:52 +0200
Subject: [PATCH] feat(header): frosted-glass mobile sheet

Match the desktop nav's frosted aesthetic on the mobile menu:

- SheetContent in SiteHeader overrides the default bg-background with
  bg-background/65 + backdrop-blur-xl + backdrop-saturate-150 (same
  recipe the sticky <header> uses), plus a translucent white/10
  border so the slide-in panel reads as glass rather than a solid
  green block.
- SheetContent.vue (shared primitive): drop the overlay opacity from
  bg-black/80 to bg-black/30 so the page behind the sheet dims
  enough to indicate focus, but the pinned landscape still shows
  through.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/SiteHeader.vue            | 5 ++++-
 src/components/ui/sheet/SheetContent.vue | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 83afe58..4498007 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -163,7 +163,10 @@ watch(() => route.path, closeMobile)
               <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">
+          <SheetContent
+            side="right"
+            class="w-full overflow-y-auto border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 sm:max-w-sm"
+          >
             <SheetHeader>
               <SheetTitle class="font-display uppercase tracking-wider">
                 {{ t('nav.menu') }}
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 502879c..59e668c 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <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"
+      class="fixed inset-0 z-50 bg-black/30 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)"