x

apps/website/src/components/Navbar.tsx

@@ -49,11 +49,13 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   const [langSheetOpen, setLangSheetOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const [scrolled, setScrolled] = useState(false)
+  const [scrollingDown, setScrollingDown] = useState(false)
   const [isClientReady, setIsClientReady] = useState(false)
   const [canRenderDesktopMenu, setCanRenderDesktopMenu] = useState(false)
   // Seed from server-fetched initialMenu — no client flash
   const [megaMenu] = useState<MegaMenuPayload[]>(initialMenu)
   const navRef = useRef<HTMLElement>(null)
+  const previousScrollY = useRef(0)
   const router = useRouter()
   const pathname = usePathname()
 
@@ -97,6 +99,27 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
     return () => window.removeEventListener('scroll', onScroll)
   }, [])
 
+  useEffect(() => {
+    const onScroll = () => {
+      const currentScrollY = window.scrollY
+      const delta = currentScrollY - previousScrollY.current
+
+      if (currentScrollY <= 20) {
+        setScrollingDown(false)
+      } else if (delta > 4) {
+        setScrollingDown(true)
+      } else if (delta < -4) {
+        setScrollingDown(false)
+      }
+
+      previousScrollY.current = currentScrollY
+    }
+
+    previousScrollY.current = window.scrollY
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
   useEffect(() => {
     let animationFrameId: number;
     const navElement = navRef.current;
@@ -156,6 +179,10 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
 
   const isHome = getPathWithoutLocale(pathname) === '/'
   const isTransparent = isHome && !scrolled && !mobileOpen && !searchOpen && !langSheetOpen
+  const pathWithoutLocale = getPathWithoutLocale(pathname)
+  const isCommercePath = ['/shop', '/products', '/category', '/cart', '/checkout', '/wishlist', '/profile', '/order', '/track']
+    .some((route) => pathWithoutLocale === route || pathWithoutLocale.startsWith(`${route}/`))
+  const hideDesktopHeader = !isCommercePath && scrollingDown && !mobileOpen && !searchOpen && !langSheetOpen
 
   useEffect(() => {
     setIsClientReady(true)
@@ -175,6 +202,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
         ref={navRef}
         data-scrolled={scrolled}
         className={`global-navbar fixed top-0 z-50 w-full border-b px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
+          hideDesktopHeader ? 'md:pointer-events-none md:-translate-y-full' : 'translate-y-0'
+        } ${
           scrolled
             ? 'border-black/5 bg-surface-page/95 shadow-lg shadow-black/5 backdrop-blur-xl'
             : isTransparent