feat: Fixed Navbar on the top for Better User Experience

package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "clsx": "^2.1.1",
     "framer-motion": "^7.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
     "react-lottie-player": "1.5.4",
-    "smoothscroll-polyfill": "^0.4.4"
+    "smoothscroll-polyfill": "^0.4.4",
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

src/App.jsx

@@ -38,11 +38,9 @@ const App = () => {
             animate={{ opacity: 1 }}
             transition={{ duration: 0.75, delay: 0.5 }}
           >
-            <div className={`${styles.paddingX} ${styles.flexCenter}`}>
-              <div className={`${styles.boxWidth}`}>
-                <Navbar />
-              </div>
-            </div>
+            {/* <div className={`${styles.paddingX} ${styles.flexCenter}`}> */}
+            <Navbar />
+            {/* </div> */}
 
             <div className={`bg-primary ${styles.flexStart}`}>
               <div className={`${styles.boxWidth}`}>

src/components/Navbar.jsx

@@ -1,13 +1,56 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { motion } from "framer-motion";
 import { close, parthmittal, menu } from "../assets";
 import { navLinks } from "../constants";
 import { scrollToSection } from "../lib/helperFunctions";
+import { cn } from "../lib/utils";
 
 const Navbar = () => {
   const [toggle, setToggle] = useState(false);
+  // state for navbar
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const [isNavbarVisible, setIsNavbarVisible] = useState(true);
 
+  // control navbar on scroll
+  const controlNavbar = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const currentScrollY = window.scrollY;
+    const isScrollingUp = currentScrollY < lastScrollY;
+
+    setIsNavbarVisible(isScrollingUp);
+    setLastScrollY(currentScrollY);
+  }, [lastScrollY]);
+
+  // Add/remove scroll event listener
+  useEffect(() => {
+    // add scroll event listener
+    window.addEventListener("scroll", controlNavbar);
+    // cleanup function
+    return () => {
+      window.removeEventListener("scroll", controlNavbar);
+    };
+  }, [lastScrollY, controlNavbar]);
   return (
-    <nav className="w-full  flex justify-between items-center navbar">
+    <motion.nav
+      className={cn(
+        `w-full xl:max-w-[1280px] xl:mx-auto sm:px-16 px-6 flex justify-between items-center navbar ${
+          isNavbarVisible && lastScrollY === 0
+            ? `translate-y-0`
+            : isNavbarVisible &&
+              "-translate-y-full bg-primary/50 backdrop-blur shadow-lg"
+        }`,
+        {
+          "fixed z-10": lastScrollY > 0,
+        }
+      )}
+      initial={{ y: 0, opacity: 0 }}
+      animate={{
+        y:
+          isNavbarVisible && lastScrollY === 0 ? 0 : isNavbarVisible ? 0 : -100,
+        opacity: isNavbarVisible ? 1 : 0,
+      }}
+      transition={{ duration: 0.3 }}
+    >
       {/* Logo */}
       <a href="#home">
         <img
@@ -69,7 +112,7 @@ const Navbar = () => {
           </ul>
         </div>
       </div>
-    </nav>
+    </motion.nav>
   );
 };
 

src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}