rubix/src/components/NavBar/NavBar.jsx

/* eslint-disable no-unused-vars */
import { Box, Image } from "@chakra-ui/react";
import { Outlet, Link, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
import logo from "../../assets/images/rubix.png";
import { MobileMenu } from "../MobileMenu/MobileMenu";
import arrow from "../../assets/images/arrow.png";

const NavBar = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const location = useLocation();

  const linkStyle = {
    width: "0",
  };

  const active = {
    content: "''",
    position: "absolute",
    bottom: "-5px",
    left: "50%",
    width: "130%",
    height: "3px",
    backgroundColor: "#DE858E",
    borderRadius: "10px",
    transform: "translateX(-50%)",
    transition: "all .3s",
  };

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      setIsScrolled(scrollPosition > 0);
    };
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("scroll", handleScroll);
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("scroll", handleScroll);
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const isMobile = windowWidth <= 996;

  return (
    <>
      {!isMobile ? (
        <>
        <Box
         position={"fixed"}
         zIndex={"999"}
         width={"100%"}
         >
          <Box
            backgroundColor={"#141315"}
            // position={"fixed"}
            zIndex={"9999"}
            width={"100%"}
            textAlign={"right"}
            padding={"4px 0px"}
          >
            <Box marginRight={"6%"}>
              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem" ,fontSize:'14px'}}>
                WALLET
              </Link>
              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem",fontSize:'14px' }}>
                EXPLORER
              </Link>
            </Box>
          </Box>

          <Box
            display="flex"
            color={"#fff"}
            justifyContent={"space-around"}
            alignItems={"center"}
            background={
              isScrolled ? "#0B0B27" : "transparent"
              // "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
            }
            // boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
            // position={"fixed"}
            zIndex={"999"}
            width={"100%"}
            top={"0px"}
            padding={"28px 0"}
            sx={{
              "@media (max-width: 996px)": {
                justifyContent: "space-between",
              },
              "@media (max-width: 375px)": {
                padding: "1rem",
              },
            }}
          >
            <Link to="/">
              <Box
                display={"flex"}
                alignItems={"baseline"}
                justifyContent={"center"}
              >
                <Image
                  src={logo}
                  width={"160px"}
                  sx={{
                    "@media (max-width: 1024px)": {
                      width: "100px",
                    },
                    "@media (max-width: 375px)": {
                      width: "100px",
                    },
                  }}
                />
              </Box>
            </Link>

            <Box
              display={"flex"}
              gap={"49px"}
              alignItems={"center"}
              sx={{
                "@media (max-width: 1024px)": {
                  gap: "22px",
                },
              }}
            >
              <Link
                to="/LearnPage"
                className="link"
                style={{ position: "relative" }}
              >
                LEARN
                <span
                  style={
                    location.pathname === "/LearnPage" ? active : linkStyle
                  }
                />
              </Link>

              <Link
                to="/BuildPage"
                className="link"
                style={{ position: "relative" }}
              >
                BUILD
                <span
                  style={
                    location.pathname === "/BuildPage" ? active : linkStyle
                  }
                />
              </Link>
              <Link to="/" className="link" style={{ position: "relative" }}>
                USE CASES
              </Link>
              <Link
                to="/community"
                className="link"
                style={{ position: "relative" }}
              >
                COMMUNITY
              </Link>
              <Link to="/" className="link" style={{ position: "relative" }}>
                FOUNDATION
              </Link>
              <Link
                to="/Contact"
                className="link"
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "5px",
                  position: "relative",
                }}
                onMouseEnter={(e) => {
                  const arrowRight = document.querySelector(".arrow");
                  arrowRight.style.transform = "rotate(45deg)";
                }}
                onMouseLeave={(e) => {
                  const arrowRight = document.querySelector(".arrow");
                  arrowRight.style.transform = "none";
                }}
              >
                CONTACT US
                <span
                  style={location.pathname === "/Contact" ? active : linkStyle}
                />
                <Image
                  src={arrow}
                  className="arrow"
                  style={{
                    transition: "transform 0.3s",
                  }}
                />
              </Link>
            </Box>
          </Box>
          </Box>
        </>
      ) : (
        <MobileMenu />
      )}
      <Outlet />
    </>
  );
};

export default NavBar;