feat(navbar): hide while scrolling down

src/components/widgets/Header.tsx

@@ -1,19 +1,19 @@
 "use client";
+import React, { useState, useEffect } from "react";
 import SJECLogo from "@/assets/sjeclogo.png";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import Image from "next/image";
 import Link from "next/link";
 import { signIn, signOut, useSession } from "next-auth/react";
 import { HamburgerMenuIcon, Cross1Icon } from "@radix-ui/react-icons";
 import { EncryptButton } from "@/components/ui/hover/button";
-import { Item } from "@radix-ui/react-navigation-menu";
 
 interface NavItem {
   label: string;
   href: string;
 }
 
-const NavItems: NavItem[] = [
+const navItems: NavItem[] = [
   {
     label: "home",
     href: "/",
@@ -37,10 +37,29 @@ const NavItems: NavItem[] = [
 ];
 
 export function Header() {
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
   const { data: session } = useSession();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [prevScrollPos, visible]);
+
   return (
     <>
-      <header className="flex sticky top-0 flex-wrap md:justify-center md:flex-nowrap z-50 w-full justify-center text-sm">
+      <header
+        className={`flex sticky top-0 flex-wrap md:justify-center md:flex-nowrap z-50 w-full justify-center text-sm transition-transform duration-300 ${
+          visible ? "translate-y-0" : "-translate-y-full"
+        }`}
+      >
         <nav
           className="mt-6 relative max-w-[70rem] w-full shadow backdrop-blur-2xl bg-white bg-opacity-10 rounded-[36px] mx-2 py-3 px-4 md:flex md:items-center md:justify-center md:py-0 md:px-6 lg:px-8 xl:mx-auto dark:bg-neutral-800 dark:border-neutral-700"
           aria-label="Global"
@@ -69,8 +88,7 @@ export function Header() {
             className="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block"
           >
             <div className="flex flex-col gap-y-4 gap-x-0 mt-5 md:flex-row md:items-center md:justify-end md:gap-y-0 md:gap-x-7 md:mt-0 md:ps-7">
-              {NavItems.map((navItem, i) => (
-                //  Using a tag because <Link> wouldn't close the navbar after switch
+              {navItems.map((navItem, i) => (
                 <a
                   key={i}
                   href={navItem.href}