From 6b738550d120c037ccb3e56277d738dab400095c Mon Sep 17 00:00:00 2001
From: Ritesh Thakur <riteshthakur@Mac.lan>
Date: Wed, 4 Feb 2026 22:52:09 +0530
Subject: [PATCH] feat: Implement auto-hiding navbar with scroll detection

- Add useAutoHidingNavbar hook for scroll behavior detection
- Hide navbar after scrolling down 100px, show on scroll up
- Always visible when scroll position < 10px
- Smooth CSS transform animations (300ms duration)
- Fixed positioning with proper z-index
- Add scroll-mt-16 to anchored sections for proper offset
- Add content padding to prevent navbar overlap
- Update both Home and Landing page navbars

Closes #440
---
 .../HomeComponents/Navbar/Navbar.tsx          | 29 +++++++-
 frontend/src/components/HomePage.tsx          | 69 ++++++++++---------
 .../LandingComponents/About/About.tsx         |  2 +-
 .../LandingComponents/Contact/Contact.tsx     |  2 +-
 .../components/LandingComponents/FAQ/FAQ.tsx  |  2 +-
 .../HowItWorks/HowItWorks.tsx                 |  2 +-
 .../LandingComponents/Navbar/Navbar.tsx       | 29 +++++++-
 frontend/src/components/LandingPage.tsx       | 16 +++--
 frontend/src/hooks/useAutoHidingNavbar.ts     | 32 +++++++++
 9 files changed, 136 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/hooks/useAutoHidingNavbar.ts

diff --git a/frontend/src/components/HomeComponents/Navbar/Navbar.tsx b/frontend/src/components/HomeComponents/Navbar/Navbar.tsx
index 8c3d91ef..b124ce8e 100644
--- a/frontend/src/components/HomeComponents/Navbar/Navbar.tsx
+++ b/frontend/src/components/HomeComponents/Navbar/Navbar.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   NavigationMenu,
   NavigationMenuItem,
@@ -17,9 +17,34 @@ export const Navbar = (
   }
 ) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const [lastScrollY, setLastScrollY] = useState<number>(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY < 10) {
+        setIsVisible(true);
+      } else if (currentScrollY > lastScrollY && currentScrollY > 100) {
+        setIsVisible(false);
+      } else if (currentScrollY < lastScrollY) {
+        setIsVisible(true);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [lastScrollY]);
 
   return (
-    <header className="sticky border-b-[1px] top-0 z-40 w-full bg-white dark:border-b-slate-700 dark:bg-background">
+    <header
+      className={`fixed top-0 left-0 right-0 z-40 w-full bg-white border-b-[1px] dark:border-b-slate-700 dark:bg-background transition-transform duration-300 ${
+        isVisible ? 'translate-y-0' : '-translate-y-full'
+      }`}
+    >
       <NavigationMenu className="mx-auto">
         <NavigationMenuList className="container h-14 px-4 w-screen flex justify-between items-center">
           <NavigationMenuItem className="font-bold flex">
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index 24eeb8a2..feb5cc03 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -302,39 +302,42 @@ export const HomePage: React.FC = () => {
               setIsLoading={setIsLoading}
             />
           </div>
-          <motion.div
-            id="home-hero"
-            initial={{ x: -1000 }}
-            animate={{ x: 0 }}
-            transition={{ duration: 0.5, ease: 'easeOut' }}
-          >
-            <Hero
-              name={userInfo.name}
-              uuid={userInfo.uuid}
-              encryption_secret={userInfo.encryption_secret}
-            />
-          </motion.div>
-          <section id="home-tasks">
-            <Tasks
-              email={userInfo.email}
-              encryptionSecret={userInfo.encryption_secret}
-              origin={url.containerOrigin}
-              UUID={userInfo.uuid}
-              isLoading={isLoading}
-              setIsLoading={setIsLoading}
-            />
-          </section>
-          <section id="home-setup-guide">
-            <SetupGuide
-              name={userInfo.name}
-              uuid={userInfo.uuid}
-              encryption_secret={userInfo.encryption_secret}
-            />
-          </section>
-          <section id="home-faq">
-            <FAQ />
-          </section>
-          <Footer />
+          <div className="pt-16">
+            <motion.div
+              id="home-hero"
+              className="scroll-mt-16"
+              initial={{ x: -1000 }}
+              animate={{ x: 0 }}
+              transition={{ duration: 0.5, ease: 'easeOut' }}
+            >
+              <Hero
+                name={userInfo.name}
+                uuid={userInfo.uuid}
+                encryption_secret={userInfo.encryption_secret}
+              />
+            </motion.div>
+            <section id="home-tasks" className="scroll-mt-16">
+              <Tasks
+                email={userInfo.email}
+                encryptionSecret={userInfo.encryption_secret}
+                origin={url.containerOrigin}
+                UUID={userInfo.uuid}
+                isLoading={isLoading}
+                setIsLoading={setIsLoading}
+              />
+            </section>
+            <section id="home-setup-guide" className="scroll-mt-16">
+              <SetupGuide
+                name={userInfo.name}
+                uuid={userInfo.uuid}
+                encryption_secret={userInfo.encryption_secret}
+              />
+            </section>
+            <section id="home-faq" className="scroll-mt-16">
+              <FAQ />
+            </section>
+            <Footer />
+          </div>
         </div>
       ) : (
         <div>
diff --git a/frontend/src/components/LandingComponents/About/About.tsx b/frontend/src/components/LandingComponents/About/About.tsx
index 7bd26900..481909a5 100644
--- a/frontend/src/components/LandingComponents/About/About.tsx
+++ b/frontend/src/components/LandingComponents/About/About.tsx
@@ -24,7 +24,7 @@ export const About = () => {
       ref={ref}
       id="about"
       data-testid="about-section"
-      className="container py-24 sm:py-32"
+      className="container py-24 sm:py-32 scroll-mt-16"
       initial="hidden"
       animate={controls}
       variants={animateUp}
diff --git a/frontend/src/components/LandingComponents/Contact/Contact.tsx b/frontend/src/components/LandingComponents/Contact/Contact.tsx
index d6e879e5..cc2c4c91 100644
--- a/frontend/src/components/LandingComponents/Contact/Contact.tsx
+++ b/frontend/src/components/LandingComponents/Contact/Contact.tsx
@@ -62,7 +62,7 @@ export const Contact = () => {
     <section
       id="contact"
       data-testid="#contact"
-      className="container py-24 sm:py-32 mt-0"
+      className="container py-24 sm:py-32 mt-0 scroll-mt-16"
     >
       <h2 className="text-3xl md:text-4xl font-bold text-center">
         <span className="inline bg-gradient-to-r from-[#F596D3] to-[#D247BF] text-transparent bg-clip-text">
diff --git a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
index fe3ec2d6..bbedbd63 100644
--- a/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
+++ b/frontend/src/components/LandingComponents/FAQ/FAQ.tsx
@@ -7,7 +7,7 @@ import { HighlightLink } from '@/components/ui/link-highlight';
 
 export const FAQ = () => {
   return (
-    <section id="faq" className="container py-24 sm:py-32">
+    <section id="faq" className="container py-24 sm:py-32 scroll-mt-16">
       <BlueHeading prefix="Frequently Asked" suffix="Questions" />
 
       <Accordion type="single" collapsible className="w-full AccordionRoot">
diff --git a/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx b/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
index 3de0c578..12c435b9 100644
--- a/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
+++ b/frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
@@ -57,7 +57,7 @@ export const HowItWorks = () => {
     <section
       id="howItWorks"
       data-testid="#howItWorks"
-      className="container text-center py-24 sm:py-32"
+      className="container text-center py-24 sm:py-32 scroll-mt-16"
     >
       <h2 className="text-3xl md:text-4xl font-bold ">
         How It{' '}
diff --git a/frontend/src/components/LandingComponents/Navbar/Navbar.tsx b/frontend/src/components/LandingComponents/Navbar/Navbar.tsx
index 7ab1ddcf..08d4ab3f 100644
--- a/frontend/src/components/LandingComponents/Navbar/Navbar.tsx
+++ b/frontend/src/components/LandingComponents/Navbar/Navbar.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import {
   NavigationMenu,
   NavigationMenuItem,
@@ -9,8 +10,34 @@ import { NavbarMobile } from './NavbarMobile';
 import { NavbarDesktop } from './NavbarDesktop';
 
 export const Navbar = () => {
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const [lastScrollY, setLastScrollY] = useState<number>(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY < 10) {
+        setIsVisible(true);
+      } else if (currentScrollY > lastScrollY && currentScrollY > 100) {
+        setIsVisible(false);
+      } else if (currentScrollY < lastScrollY) {
+        setIsVisible(true);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [lastScrollY]);
+
   return (
-    <header className="sticky border-b-[1px] top-0 z-40 w-full bg-white dark:border-b-slate-700 dark:bg-background">
+    <header
+      className={`fixed top-0 left-0 right-0 z-40 w-full bg-white border-b-[1px] dark:border-b-slate-700 dark:bg-background transition-transform duration-300 ${
+        isVisible ? 'translate-y-0' : '-translate-y-full'
+      }`}
+    >
       <NavigationMenu className="mx-auto">
         <NavigationMenuList className="container h-14 px-4 w-screen flex justify-between items-center">
           <NavigationMenuItem className="font-bold flex">
diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index e176c8bc..a658275c 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -12,13 +12,15 @@ export const LandingPage = () => {
   return (
     <div className="overflow-x-hidden">
       <Navbar />
-      <Hero />
-      <About />
-      <HowItWorks />
-      <Contact />
-      <FAQ />
-      <Footer />
-      <ScrollToTop />
+      <div className="pt-16">
+        <Hero />
+        <About />
+        <HowItWorks />
+        <Contact />
+        <FAQ />
+        <Footer />
+        <ScrollToTop />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/hooks/useAutoHidingNavbar.ts b/frontend/src/hooks/useAutoHidingNavbar.ts
new file mode 100644
index 00000000..7924fd15
--- /dev/null
+++ b/frontend/src/hooks/useAutoHidingNavbar.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+export const useAutoHidingNavbar = () => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      // Always visible when scroll position < 10px
+      if (currentScrollY < 10) {
+        setIsVisible(true);
+      } else if (currentScrollY > lastScrollY) {
+        // Scrolling down - hide after 100px
+        if (currentScrollY > 100) {
+          setIsVisible(false);
+        }
+      } else {
+        // Scrolling up - show immediately
+        setIsVisible(true);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [lastScrollY]);
+
+  return isVisible;
+};