From 6d921242117e9d62a5d70a0cea7f31351498badd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 1 Mar 2026 22:00:04 +0000
Subject: [PATCH] feat: hide header on scroll down, show on scroll up
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Better UX for content-heavy landing page — maximizes viewport
while keeping navigation instantly accessible on scroll up.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../marketing/layout/header/header.tsx        | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/modules/marketing/layout/header/header.tsx b/apps/web/src/modules/marketing/layout/header/header.tsx
index 3e4dba2..34d6c9e 100644
--- a/apps/web/src/modules/marketing/layout/header/header.tsx
+++ b/apps/web/src/modules/marketing/layout/header/header.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
+
 import { useTranslation } from "@turbostarter/i18n";
 import { cn } from "@turbostarter/ui";
 import { buttonVariants } from "@turbostarter/ui-web/button";
@@ -33,9 +35,27 @@ const links = [
 
 export const Header = () => {
   const { t } = useTranslation("marketing");
+  const [hidden, setHidden] = useState(false);
+  const lastY = useRef(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      const y = window.scrollY;
+      // Only hide after scrolling past 100px, show immediately on scroll up
+      setHidden(y > 100 && y > lastY.current);
+      lastY.current = y;
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
 
   return (
-    <header className="bg-background sticky top-[var(--banner-height)] z-40 w-full py-3 lg:bg-background/80 lg:backdrop-blur-sm">
+    <header
+      className={cn(
+        "bg-background sticky top-[var(--banner-height)] z-40 w-full py-3 transition-transform duration-300 lg:bg-background/80 lg:backdrop-blur-sm",
+        hidden && "-translate-y-full",
+      )}
+    >
       <div className="flex items-center justify-between px-6 pr-4 sm:container">
         <TurboLink
           href={pathsConfig.index}