diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx index a959a1d..4bfbe42 100644 --- a/apps/website/src/components/Navbar.tsx +++ b/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(initialMenu) const navRef = useRef(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