mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-28 02:05:49 +00:00
813 lines
28 KiB
JavaScript
813 lines
28 KiB
JavaScript
/* eslint-disable no-unused-vars */
|
|
import {
|
|
Box,
|
|
Image,
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
PopoverHeader,
|
|
PopoverBody,
|
|
PopoverFooter,
|
|
PopoverArrow,
|
|
PopoverCloseButton,
|
|
PopoverAnchor,
|
|
Button,
|
|
} 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";
|
|
import learnIcon from "../../assets/images/Navicons/learnNav.png";
|
|
import pledgeIcon from "../../assets/images/Navicons/pledgeIcon.png";
|
|
import contractIcon from "../../assets/images/Navicons/contractIcon.png";
|
|
import tokenIcon from "../../assets/images/Navicons/contractIcon.png";
|
|
import buildIcon from "../../assets/images/Navicons/buildIcon.png";
|
|
import nodeIcon from "../../assets/images/Navicons/nodeIcon.png";
|
|
import quorumIcon from "../../assets/images/Navicons/quorumIcon.png";
|
|
import subnetsIcon from "../../assets/images/Navicons/subnetsIcon.png";
|
|
import fintechIcon from "../../assets/images/Navicons/fintechIcon.png";
|
|
import adTech from "../../assets/images/Navicons/adTech.png";
|
|
import marTech from "../../assets/images/Navicons/marTech.png";
|
|
import healthTech from "../../assets/images/Navicons/healthTech.png";
|
|
|
|
const NavBar = () => {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isHoveredLearn, setIsHoveredLearn] = useState(false);
|
|
const [isHoveredBuild, setIsHoveredBuild] = useState(false);
|
|
const [isHoveredCases, setIsHoveredCases] = useState(false);
|
|
// const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
|
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
|
const location = useLocation();
|
|
|
|
const linkStyle = {
|
|
width: "0",
|
|
};
|
|
|
|
const active = {
|
|
content: "''",
|
|
position: "absolute",
|
|
bottom: "0px",
|
|
left: "50%",
|
|
width: "100%",
|
|
height: "3px",
|
|
backgroundColor: "#DE858E",
|
|
borderRadius: "10px",
|
|
transform: "translateX(-50%)",
|
|
transition: "all .3s",
|
|
};
|
|
|
|
const highlight = {
|
|
color: "rgb(222, 133, 142)",
|
|
};
|
|
|
|
const normal = {
|
|
color: "#fff",
|
|
};
|
|
|
|
const iconwidth = "50px";
|
|
|
|
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="https://getfexr.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{
|
|
color: "#fff",
|
|
marginRight: "2.5rem",
|
|
fontSize: "14px",
|
|
}}
|
|
>
|
|
WALLET
|
|
</Link>
|
|
<Link
|
|
to="https://rubixexplorer.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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={"25px"}
|
|
alignItems={"center"}
|
|
sx={{
|
|
"@media (max-width: 1024px)": {
|
|
gap: "22px",
|
|
},
|
|
}}
|
|
>
|
|
<Popover
|
|
isOpen={isHoveredLearn}
|
|
onClose={() => setIsHoveredLearn(false)}
|
|
>
|
|
<PopoverTrigger>
|
|
<Button
|
|
backgroundColor={"transparent"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
_hover={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
onMouseEnter={() => setIsHoveredLearn(true)}
|
|
onMouseLeave={() => setIsHoveredLearn(false)}
|
|
>
|
|
LEARN
|
|
<span
|
|
style={
|
|
location.pathname === "/LearnPage"
|
|
? active
|
|
: linkStyle
|
|
}
|
|
/>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
backgroundColor={"#0D0B20"}
|
|
borderRadius={"10px"}
|
|
border={"none"}
|
|
padding={"1rem"}
|
|
onMouseEnter={() => setIsHoveredLearn(true)}
|
|
onMouseLeave={() => setIsHoveredLearn(false)}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
>
|
|
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
|
|
<PopoverBody>
|
|
<Link
|
|
to="/LearnPage"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/LearnPage"
|
|
? highlight
|
|
: normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={learnIcon} width={`${iconwidth}`} />
|
|
Learn
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="https://learn.rubix.net/pop/"
|
|
target="_blank"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/LearnPage"
|
|
? highlight
|
|
: normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={pledgeIcon} width={`${iconwidth}`} />
|
|
Proof-of-pledge Protocol
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="https://learn.rubix.net/smartcontract/"
|
|
target="_blank"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/LearnPage"
|
|
? highlight
|
|
: normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={contractIcon} width={`${iconwidth}`} />
|
|
Smart contracts
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="https://learn.rubix.net/tokenomics/"
|
|
target="_blank"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/LearnPage"
|
|
? highlight
|
|
: normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={tokenIcon} width={`${iconwidth}`} />
|
|
Tokenomics in Rubix
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<Popover
|
|
isOpen={isHoveredBuild}
|
|
onClose={() => setIsHoveredBuild(false)}
|
|
>
|
|
<PopoverTrigger>
|
|
<Button
|
|
backgroundColor={"transparent"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
_hover={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
onMouseEnter={() => setIsHoveredBuild(true)}
|
|
onMouseLeave={() => setIsHoveredBuild(false)}
|
|
>
|
|
BUILD
|
|
<span
|
|
style={
|
|
location.pathname === "/BuildPage"
|
|
? active
|
|
: linkStyle
|
|
}
|
|
/>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
backgroundColor={"#0D0B20"}
|
|
borderRadius={"10px"}
|
|
border={"none"}
|
|
padding={"1rem"}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
onMouseEnter={() => setIsHoveredBuild(true)}
|
|
onMouseLeave={() => setIsHoveredBuild(false)}
|
|
>
|
|
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
|
|
<PopoverBody>
|
|
<Link
|
|
to="/BuildPage"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/BuildPage"
|
|
? highlight
|
|
: normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={buildIcon} width={`${iconwidth}`} />
|
|
Build
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="https://learn.rubix.net/node-setup/"
|
|
target="_blank"
|
|
className="link"
|
|
// style={
|
|
// location.pathname === "/BuildPage"
|
|
// ? highlight
|
|
// : normal
|
|
// }
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={nodeIcon} width={`${iconwidth}`} />
|
|
Set up Rubix Node
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="https://learn.rubix.net/quorum/"
|
|
target="_blank"
|
|
className="link"
|
|
// style={
|
|
// location.pathname === "/BuildPage"
|
|
// ? highlight
|
|
// : normal
|
|
// }
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={quorumIcon} width={`${iconwidth}`} />
|
|
Quorum
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="https://learn.rubix.net/subnets/"
|
|
target="_blank"
|
|
className="link"
|
|
// style={
|
|
// location.pathname === "/BuildPage"
|
|
// ? highlight
|
|
// : normal
|
|
// }
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={subnetsIcon} width={`${iconwidth}`} />
|
|
Subnets
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<Popover
|
|
isOpen={isHoveredCases}
|
|
onClose={() => setIsHoveredCases(false)}
|
|
>
|
|
<PopoverTrigger>
|
|
<Button
|
|
backgroundColor={"transparent"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
_hover={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
onMouseEnter={() => setIsHoveredCases(true)}
|
|
onMouseLeave={() => setIsHoveredCases(false)}
|
|
>
|
|
USE CASES
|
|
<span
|
|
style={
|
|
location.pathname === "/fin-tech" ||
|
|
location.pathname === "/ad-tech" ||
|
|
location.pathname === "/mar-tech" ||
|
|
location.pathname === "/heath-tech"
|
|
? active
|
|
: linkStyle
|
|
}
|
|
/>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
backgroundColor={"#0D0B20"}
|
|
borderRadius={"10px"}
|
|
border={"none"}
|
|
padding={"1rem"}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
onMouseEnter={() => setIsHoveredCases(true)}
|
|
onMouseLeave={() => setIsHoveredCases(false)}
|
|
>
|
|
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
|
|
<PopoverBody>
|
|
<Link
|
|
to="/fin-tech"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/fin-tech" ? highlight : normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={fintechIcon} width={`${iconwidth}`} />
|
|
FinTech
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="/ad-tech"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/ad-tech" ? highlight : normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={adTech} width={`${iconwidth}`} />
|
|
AdTech
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="/mar-tech"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/mar-tech" ? highlight : normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={marTech} width={`${iconwidth}`} />
|
|
MarTech
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="/health-tech"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/health-tech"
|
|
? highlight
|
|
: normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={healthTech} width={`${iconwidth}`} />
|
|
HealthTech
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<Link
|
|
to="/community"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/community" ? highlight : normal
|
|
}
|
|
>
|
|
<Button
|
|
backgroundColor={"transparent"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
_hover={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
>
|
|
COMMUNITY
|
|
<span
|
|
style={
|
|
location.pathname === "/community" ||
|
|
location.pathname === "/Articles"
|
|
? active
|
|
: linkStyle
|
|
}
|
|
/>
|
|
</Button>
|
|
</Link>
|
|
{/* <Popover
|
|
isOpen={isHoveredCommunity}
|
|
onClose={() => setIsHoveredCommunity(false)}
|
|
>
|
|
<PopoverTrigger>
|
|
<Button
|
|
backgroundColor={"transparent"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
_hover={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
onMouseEnter={() => setIsHoveredCommunity(true)}
|
|
onMouseLeave={() => setIsHoveredCommunity(false)}
|
|
>
|
|
COMMUNITY
|
|
<span
|
|
style={
|
|
location.pathname === "/community" ||
|
|
location.pathname === "/Articles"
|
|
? active
|
|
: linkStyle
|
|
}
|
|
/>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
backgroundColor={"#0D0B20"}
|
|
borderRadius={"10px"}
|
|
border={"none"}
|
|
padding={"1rem"}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
onMouseEnter={() => setIsHoveredCommunity(true)}
|
|
onMouseLeave={() => setIsHoveredCommunity(false)}
|
|
>
|
|
<PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
|
|
<PopoverBody>
|
|
<Link
|
|
to="/community"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/community"
|
|
? highlight
|
|
: normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={fintechIcon} width={`${iconwidth}`} />
|
|
Community
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="/Articles"
|
|
className="link"
|
|
style={
|
|
location.pathname === "/Articles" ? highlight : normal
|
|
}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={nodeIcon} width={`${iconwidth}`} />
|
|
News & Articles
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="/"
|
|
className="link"
|
|
// style={
|
|
// location.pathname === "/LearnPage"
|
|
// ? highlight
|
|
// : normal
|
|
// }
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={quorumIcon} width={`${iconwidth}`} />
|
|
MarTech
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
|
|
<PopoverBody>
|
|
<Link
|
|
to="/"
|
|
className="link"
|
|
// style={
|
|
// location.pathname === "/LearnPage"
|
|
// ? highlight
|
|
// : normal
|
|
// }
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Image src={subnetsIcon} width={`${iconwidth}`} />
|
|
HealthTech
|
|
</Box>
|
|
</Link>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover> */}
|
|
|
|
<Link to="/" className="link" style={{ position: "relative" }}>
|
|
<Button
|
|
backgroundColor={"transparent"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
_hover={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
>
|
|
FOUNDATION
|
|
</Button>
|
|
{/* <span
|
|
style={location.pathname === "/" ? active : linkStyle}
|
|
/> */}
|
|
</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";
|
|
}}
|
|
>
|
|
<Button
|
|
backgroundColor={"transparent"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
_hover={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "none",
|
|
}}
|
|
>
|
|
CONTACT US
|
|
</Button>
|
|
<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;
|