feat: fixed, hiding header

icssc · Jan 25, 2024 · 8e114f2 · 8e114f2
1 parent 80d07de
commit 8e114f2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,22 +1,50 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { cn } from "@/lib/utils";
 
 const Header = () => {
+    const [showNav, setShowNav] = useState(true);
+
+    useEffect(() => {
+        let prevScrollPos = window.pageYOffset;
+
+        const handleScroll = () => {
+            const currentScrollPos = window.pageYOffset;
+            const scrollingUp = prevScrollPos > currentScrollPos;
+
+            setShowNav(scrollingUp);
+            prevScrollPos = currentScrollPos;
+        };
+
+        window.addEventListener("scroll", handleScroll);
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+
     return (
         <>
-            <nav className="wrapper sticky flex items-center gap-x-8 flex-row inset-x-0 z-30 h-24">
-                <div className="flex items-center text-3xl font-bold text-primary gap-x-4">
-                    <Link href={"/"}>
-                        <Image
-                            src="/Logo_Without_BG.png"
-                            alt="logo"
-                            width={64}
-                            height={64}
-                        />
-                    </Link>
-                </div>
-
-                <ul className="flex flex-row gap-x-4 text-2xl font-semibold">
+            <nav
+                className={cn(
+                    "wrapper fixed top-0 flex items-center gap-x-4 md:gap-x-8 flex-row inset-x-0 z-30 h-24",
+                    showNav ? "opacity-100" : "opacity-0",
+                    "transition-all duration-500",
+                )}
+            >
+                <Link href={"/"}>
+                    <Image
+                        src="/Logo_Without_BG.png"
+                        alt="logo"
+                        width={64}
+                        height={64}
+                    />
+                </Link>
+
+                <ul className="flex flex-row gap-x-4 text-xl md:text-2xl font-semibold">
                     <li>
                         <a href="#events">Events</a>
                     </li>

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -4,7 +4,7 @@ import { Calendar, Navigation } from "lucide-react";
 
 const Hero = () => {
     return (
-        <div className="flex-center flex-col gap-y-12 min-h-[calc(100vh-6rem)]">
+        <div className="flex-center flex-col gap-y-12 min-h-[calc(100vh)]">
             <div className="flex flex-col gap-y-8">
                 <div className="flex justify-center items-center flex-col gap-y-4">
                     <h1 className="text-7xl md:text-8xl font-bold text-center">