From daf9f29b35058deb3294a688f4472728fc4866be Mon Sep 17 00:00:00 2001 From: genial-mani Date: Thu, 3 Oct 2024 00:25:51 +0530 Subject: [PATCH] Issue #3 has been fixed: Make the nav bar transition smooth and intuitive --- src/app/page.js | 80 +++++++++++++++++++++++++++---------------------- 1 file changed, 44 insertions(+), 36 deletions(-) diff --git a/src/app/page.js b/src/app/page.js index 8cd367e..360f339 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,47 +1,55 @@ "use client"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import Image from "next/image"; -const hideNavbar = () => { - if (typeof window !== "undefined") { - const navbar = document.querySelector("nav"); - if (navbar) navbar.style.display = "none"; - } -}; -const showNavbar = () => { - if (typeof window !== "undefined") { - const navbar = document.querySelector("nav"); - if (navbar) { - navbar.style.display = "flex"; - } - } -}; export default function Home() { + const [visible, setVisible] = useState(false); + const [scrollPosition, setScrollPosition] = useState(0); + + + // This UseEffect is used to handle scrolling useEffect(() => { - hideNavbar(); + const handleScroll = () => { + const currentScrollPos = window.scrollY; + + if (currentScrollPos > scrollPosition) { + setVisible(false); //scrolling down + } else { + setVisible(true); //scrolling up + } + + setScrollPosition(currentScrollPos); + }; + + window.addEventListener("scroll", handleScroll); + return () => { - const navbar = document.querySelector("nav"); - if (navbar) navbar.style.display = "flex"; + window.removeEventListener("scroll", handleScroll); }; - }, []); + }, [scrollPosition]); // Function to scroll to the section const scrollToSection = () => { const section = document.getElementById("more-section"); if (section) { - section.scrollIntoView({ behavior: "smooth" }); // Smooth scrolling - showNavbar(); + section.scrollIntoView({ behavior: "smooth" }); + setTimeout(() => { // this method is used to move down the nav when clicked on button. + window.scrollBy({ + top: -1, + behavior: "smooth" + }); + }, 600); } }; return ( <> -