UNOV/myinfomate-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update navbar

Browse Source
This commit is contained in:
Thomas Fransolet 2026-04-15 17:15:56 +02:00
parent 0e17bafad0
commit 4ab07d93e9
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/page.tsx
View File

@ -66,6 +66,8 @@ export default function Home() {
const [lang, setLang] = useState<Language>('fr');
const [isLangOpen, setIsLangOpen] = useState(false);
const langDropdownRef = useRef<HTMLDivElement>(null);
const [navVisible, setNavVisible] = useState(true);
const lastScrollY = useRef(0);
const t = translations[lang];
@ -76,6 +78,17 @@ export default function Home() {
value: t.modules.items[i].value,
}));
// Hide navbar on scroll down, show on scroll up
useEffect(() => {
const handleScroll = () => {
const currentY = window.scrollY;
setNavVisible(currentY < lastScrollY.current || currentY < 10);
lastScrollY.current = currentY;
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Lock body scroll when mobile menu is open
useEffect(() => {
if (isMenuOpen) {
@ -140,7 +153,7 @@ export default function Home() {
return (
<main className="bg-slate-50 text-slate-900 selection:bg-primary/30 font-display">
{/* Top Navigation */}
<header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
<header className={`fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 transition-transform duration-300 ${navVisible ? 'translate-y-0' : '-translate-y-full'}`}>
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<a className="flex items-center gap-3 shrink-0" href="#">
<img