Skip to content

feat: Implement auto-hiding navbar with scroll detection #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
riteshh-thakur wants to merge 1 commit into
base: main
Choose a base branch
from
+136 −47
Open

feat: Implement auto-hiding navbar with scroll detection #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 27 additions & 2 deletions frontend/src/components/HomeComponents/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
NavigationMenu,
NavigationMenuItem,
Expand All @@ -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">
Expand Down
69 changes: 36 additions & 33 deletions frontend/src/components/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/LandingComponents/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/LandingComponents/Contact/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/LandingComponents/FAQ/FAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/LandingComponents/HowItWorks/HowItWorks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{' '}
Expand Down
29 changes: 28 additions & 1 deletion frontend/src/components/LandingComponents/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useState, useEffect } from 'react';
import {
NavigationMenu,
NavigationMenuItem,
Expand All @@ -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">
Expand Down
16 changes: 9 additions & 7 deletions frontend/src/components/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
32 changes: 32 additions & 0 deletions frontend/src/hooks/useAutoHidingNavbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
};