From a76dce449f8073e2f1840ff7deda01cf1a603a78 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 14 Jun 2026 16:50:07 +0200
Subject: [PATCH] feat(header): hide nav on scroll-down, reveal on scroll-up

Standard VueUse recipe: useWindowScroll for the reactive position,
compare against the watcher's previous value for direction. Header
translates off the top when scrolling down and slides back in on
scroll-up; always shown near the top and while the mobile sheet is open.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/SiteHeader.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index eba40c3..63c84ad 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { useWindowScroll } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { RouterLink, useRoute } from 'vue-router'
 import { cn } from '@/lib/utils'
@@ -26,6 +27,18 @@ const route = useRoute()
 
 const mobileOpen = ref(false)
 
+// Hide the header on scroll-down, reveal on scroll-up — the standard VueUse
+// recipe: `useWindowScroll` for the reactive position, then compare against
+// the watcher's previous value for direction. Always shown near the top of
+// the page; the 8px deadband stops jitter from tiny scroll deltas.
+const hidden = ref(false)
+const { y } = useWindowScroll()
+watch(y, (cur, prev) => {
+  if (cur < 80) hidden.value = false
+  else if (cur - prev > 8) hidden.value = true
+  else if (prev - cur > 8) hidden.value = false
+})
+
 interface NavItem {
   to: string
   label: string
@@ -88,7 +101,8 @@ watch(() => route.path, closeMobile)
 
 <template>
   <header
-    class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150"
+    class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 transition-transform duration-300 ease-out"
+    :class="hidden && !mobileOpen ? '-translate-y-full' : 'translate-y-0'"
   >
     <div class="mx-auto max-w-7xl px-4 lg:px-6">
       <div class="flex h-16 items-center justify-between gap-4">