104 lines
3.0 KiB
JavaScript
104 lines
3.0 KiB
JavaScript
import {
|
|
Box,
|
|
Container,
|
|
Image,
|
|
Text,
|
|
useColorMode,
|
|
} from "@chakra-ui/react";
|
|
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 [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
|
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); // Update isScrolled based on scroll position
|
|
};
|
|
|
|
const handleResize = () => {
|
|
setWindowWidth(window.innerWidth);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
window.removeEventListener("resize", handleResize);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
position={"absolute"}
|
|
zIndex={"999"}
|
|
width={"100%"}
|
|
top={0}
|
|
left={0}
|
|
id="navbar"
|
|
color={colorMode === "light" ? "light" : "black.900"}
|
|
padding={"16px 0px"}
|
|
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"}
|
|
width={{base:"95px",md : "120px"}}
|
|
/>
|
|
</Link>
|
|
|
|
<Box display={"flex"} alignItems={"center"} gap={{base:5,md : 7}}>
|
|
<NavLink to="/main-net">
|
|
{({ isActive }) => (
|
|
<Text
|
|
fontSize={{ base: "12px", md: "14px" }}
|
|
fontWeight="400"
|
|
borderBottom={isActive ? "1px solid #DE858E" : "0px solid #fff"}
|
|
>
|
|
MAIN NET
|
|
</Text>
|
|
)}
|
|
</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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|