109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
/* 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 logo from "../../assets/images/rubix.png";
|
|
import logoLight from "../../assets/images/light-logo.png";
|
|
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 [isSwitchOn, setIsSwitchOn] = useState(true);
|
|
|
|
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 theme = localStorage?.getItem("light");
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
position={"absolute"}
|
|
zIndex={"999"}
|
|
width={"100%"}
|
|
top={0}
|
|
left={0}
|
|
id="navbar"
|
|
// bg={colorMode === "light" ? "light" : "black.900"}
|
|
color={colorMode === "light" ? "light" : "black.900"}
|
|
padding={"22px 0px"}
|
|
// borderBottom={"1px solid #ccc"}
|
|
borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
|
|
>
|
|
<Container maxW="6xl">
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
justifyContent={"space-between"}
|
|
w={"100%"}
|
|
>
|
|
<Link to="/">
|
|
<Image
|
|
src={colorMode === "light" ? logoLight : logo}
|
|
width={"120px"}
|
|
/>
|
|
</Link>
|
|
|
|
<Box display={"flex"} alignItems={"center"} gap={7}>
|
|
<NavLink
|
|
to="/mainNet"
|
|
style={({ isActive }) => ({
|
|
fontSize: "14px",
|
|
fontWeight: "400",
|
|
borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for MAIN NET
|
|
})}
|
|
>
|
|
MAIN NET
|
|
</NavLink>
|
|
<NavLink
|
|
to="/subnet"
|
|
style={({ isActive }) => ({
|
|
fontSize: "14px",
|
|
fontWeight: "400",
|
|
borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for SUBNETS
|
|
})}
|
|
>
|
|
SUBNETS
|
|
</NavLink>
|
|
<SwitchBtn
|
|
isSwitchOn={isSwitchOn}
|
|
setIsSwitchOn={setIsSwitchOn}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
{/* <Box h={"74px"}></Box> */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|