update

src/components/NavBar/NavBar.jsx

@@ -1,32 +1,27 @@
-/* eslint-disable no-unused-vars */
 import {
   Box,
-  Button,
   Container,
-  Icon,
   Image,
-  Stack,
-  Switch,
   useColorMode,
-  VStack,
 } from "@chakra-ui/react";
-import { Outlet, Link, useLocation, NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import logo from "../../assets/images/rubix.png";
 import logoLight from "../../assets/images/rubixlogo.svg";
 import { useEffect, useState } from "react";
 import SwitchBtn from "../SwitchBtn/SwitchBtn";
 
 const NavBar = () => {
-  // const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const { colorMode, toggleColorMode } = useColorMode();
+  const [isScrolled, setIsScrolled] = useState(false); // Declare isScrolled state
+  const { colorMode } = useColorMode();
   const [isSwitchOn, setIsSwitchOn] = useState(true);
 
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
-      setIsScrolled(scrollPosition > 0);
+      setIsScrolled(scrollPosition > 0); // Update isScrolled based on scroll position
     };
+    
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
     };
@@ -40,8 +35,6 @@ const NavBar = () => {
     };
   }, []);
 
-  const theme = localStorage?.getItem("light");
-
   return (
     <>
       <Box
@@ -51,12 +44,9 @@ const NavBar = () => {
         top={0}
         left={0}
         id="navbar"
-        // bg={colorMode === "light" ? "light" : "black.900"}
         color={colorMode === "light" ? "light" : "black.900"}
         padding={"16px 0px"}
-        // borderBottom={"1px solid #ccc"}
         borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
-        // boxShadow={'md'}
       >
         <Container maxW="6xl">
           <Box
@@ -78,7 +68,9 @@ const NavBar = () => {
                 style={({ isActive }) => ({
                   fontSize: "14px",
                   fontWeight: "400",
-                  borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for MAIN NET
+                  borderBottom: isActive
+                    ? "1px solid #DE858E"
+                    : "0px solid #fff", // Active style for MAIN NET
                 })}
               >
                 MAIN NET
@@ -88,7 +80,9 @@ const NavBar = () => {
                 style={({ isActive }) => ({
                   fontSize: "14px",
                   fontWeight: "400",
-                  borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for SUBNETS
+                  borderBottom: isActive
+                    ? "1px solid #DE858E"
+                    : "0px solid #fff", // Active style for SUBNETS
                 })}
               >
                 SUBNETS
@@ -101,7 +95,6 @@ const NavBar = () => {
           </Box>
         </Container>
       </Box>
-      {/* <Box h={"74px"}></Box> */}
     </>
   );
 };