From 416dda000d07702773328508dceb4553e884d7fa Mon Sep 17 00:00:00 2001
From: anishshobithps <anish.shobith19@gmail.com>
Date: Wed, 17 Apr 2024 13:53:48 +0530
Subject: [PATCH] feat(navbar): hide while scrolling down

---
 src/components/widgets/Header.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/widgets/Header.tsx b/src/components/widgets/Header.tsx
index 15895d0..97f361d 100644
--- a/src/components/widgets/Header.tsx
+++ b/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}