From e531766b7a67153139f36617585d26b29f3e0cbb Mon Sep 17 00:00:00 2001
From: harishsehlangia <harish82817@gmail.com>
Date: Sun, 8 Feb 2026 21:45:48 +0530
Subject: [PATCH] fix(header): hide/show navbar together with activity banner
 based on scroll direction

---
 src/common/header/Header.jsx | 50 +++++++++++++++++++++++++++++++++---
 src/common/header/header.css | 26 ++++++++++++++++---
 src/common/home/Home.jsx     |  2 +-
 3 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx
index 4e0a962c0a..919f3bcd6c 100644
--- a/src/common/header/Header.jsx
+++ b/src/common/header/Header.jsx
@@ -1,5 +1,5 @@
 import HeaderNav from './HeaderNav';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import Countdown from 'react-countdown';
 import './header.css';
@@ -10,6 +10,50 @@ const Header = () => {
   const pathName = location.pathname;
 
   const [reset, setReset] = useState({ search: false, filter: false });
+  const [showNav, setShowNav] = useState(true);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const current = window.scrollY;
+
+      const hero = document.getElementById('hero');
+
+      if (hero) {
+        const heroBottom = hero.getBoundingClientRect().bottom;
+        const headerHeight = 64; // your navbar height
+
+        const banner = document.querySelector('.activity-timer-banner');
+        const bannerHeight = banner?.offsetHeight || 0;
+
+        if (heroBottom > headerHeight + bannerHeight) {
+          setShowNav(true);
+          lastScrollY.current = current;
+
+          return;
+        }
+      }
+
+      // after hero → direction based (with threshold)
+      const SCROLL_THRESHOLD = 20;
+      const diff = Math.abs(current - lastScrollY.current);
+
+      // ignore tiny scrolls
+      if (diff < SCROLL_THRESHOLD) return;
+
+      if (current > lastScrollY.current) {
+        setShowNav(false); // down
+      } else {
+        setShowNav(true); // up
+      }
+
+      lastScrollY.current = current;
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   useEffect(() => {
     if (location.state) {
@@ -95,7 +139,7 @@ const Header = () => {
   };
 
   return (
-    <>
+    <div className={`nav-wrapper ${showNav ? 'nav--visible' : 'nav--hidden'}`}>
       {process.env.REACT_APP_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer && (
         <Countdown date={new Date(1675209600000)} renderer={activityTimerRenderer} />
       )}
@@ -122,7 +166,7 @@ const Header = () => {
 
         <HeaderNav showBrowse={showHideBits.showBrowse} />
       </header>
-    </>
+    </div>
   );
 };
 
diff --git a/src/common/header/header.css b/src/common/header/header.css
index c9ae6cbe27..75f9a7edba 100644
--- a/src/common/header/header.css
+++ b/src/common/header/header.css
@@ -1,8 +1,9 @@
 .app-header {
-  position: relative;
+  /* position: fixed;
   top: 0;
   right: 0;
-  left: 0;
+  left: 0; */
+  transition: transform 0.3s ease;
   z-index: 10;
   display: flex;
   justify-content: space-between;
@@ -14,6 +15,25 @@
   padding: 0 1rem 0 0.6rem;
 }
 
+.nav-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  transition: transform 0.3s ease;
+}
+
+.nav--hidden {
+  transform: translateY(-100%);
+}
+
+.nav--visible {
+  transform: translateY(0);
+}
+
+
+
 @media screen and (max-width: 768px) {
   .app-header {
     padding: 0 1rem 0 0.2rem;
@@ -21,7 +41,7 @@
 }
 
 .app-header-home {
-  position: sticky;
+  /* position: sticky; */
 }
 
 .app-header-home.app-header-home--promo {
diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index f540468964..074e906791 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -12,7 +12,7 @@ import DefaultBanner from 'common/defaultBanner/DefaultBanner';
 const Home = () => {
   return (
     <main>
-      <section className="app-home-body">
+      <section className="app-home-body" id="hero">
         <DefaultBanner />
       </section>
       <section className="home-features">