fix banner scrolling

sanidhyy · Jan 27, 2024 · 8db2be0 · 8db2be0
1 parent d95f840
commit 8db2be0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BrowserRouter } from "react-router-dom";
 import {
   About,
@@ -16,12 +16,14 @@ import Footer from "./components/Footer";
 
 // App
 const App = () => {
+  const [hide, setHide] = useState(true);
+
   return (
     <BrowserRouter>
-      <Banner />
+      <Banner hide={hide} setHide={setHide} />
       <div className="relative z-0 bg-primary">
         <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
-          <Navbar />
+          <Navbar hide={hide} />
           <Hero />
         </div>
         <About />

diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
 
 import { close, bulb } from "../assets";
 
-const Banner = () => {
-  const [hide, setHide] = useState(true);
-
+const Banner = ({ hide, setHide }) => {
   useEffect(() => {
     const bannerTimer = setTimeout(() => {
       setHide(false);

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 
 import { styles } from "../styles";
@@ -7,16 +7,33 @@ import { logo, menu, close } from "../assets";
 import { cn } from "../utils/lib";
 
 // Navbar
-const Navbar = () => {
+const Navbar = ({ hide }) => {
   // state variables
   const [active, setActive] = useState("");
   const [toggle, setToggle] = useState(false);
+  const [isAtBottom, setIsAtBottom] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      console.log(window.scrollY);
+      if (window.scrollY > 10) {
+        setIsAtBottom(true);
+      } else {
+        setIsAtBottom(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
   return (
     <nav
       className={cn(
         styles.paddingX,
-        "w-full flex items-center py-5 fixed top-0 z-20 bg-primary"
+        "w-full flex items-center py-5 fixed top-0 z-20 bg-primary",
+        isAtBottom || hide ? "mt-0" : "mt-20"
       )}
     >
       <div className="w-full flex justify-between items-center max-w-7xl mx-auto">