mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-28 02:05:49 +00:00
424 lines
13 KiB
JavaScript
424 lines
13 KiB
JavaScript
/* eslint-disable no-unused-vars */
|
|
import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
|
|
import {
|
|
Menu,
|
|
MenuButton,
|
|
MenuList,
|
|
MenuItem,
|
|
Accordion,
|
|
AccordionItem,
|
|
AccordionButton,
|
|
AccordionPanel,
|
|
AccordionIcon,
|
|
IconButton,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import { Box, Image } from "@chakra-ui/react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import { Button } from "@chakra-ui/react";
|
|
// import { HashLink } from "react-router-hash-link";
|
|
import logo from "../../assets/images/rubix.png";
|
|
import { useEffect, useState } from "react";
|
|
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
|
|
|
|
export const MobileMenu = () => {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [menu, setMenu] = useState(false);
|
|
const location = useLocation();
|
|
const { data } = useGetUseCaseQuery();
|
|
// console.log(data);
|
|
const useCase = data?.data?.rows;
|
|
// console.log(useCase);
|
|
|
|
const highlight = {
|
|
color: "rgb(222, 133, 142)",
|
|
};
|
|
|
|
const normal = {
|
|
color: "#fff",
|
|
};
|
|
|
|
const handleClick = () => {
|
|
setMenu(!menu);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollPosition = window.scrollY;
|
|
setIsScrolled(scrollPosition > 0);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const linkStyle = {
|
|
color: "#fff",
|
|
display: "block",
|
|
padding: "15px 0",
|
|
};
|
|
|
|
const innerLink = {
|
|
color: location.pathname === "/LearnPage" ? "rgb(222, 133, 142)" : "#fff",
|
|
display: "block",
|
|
padding: "15px 0",
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
id="navbar"
|
|
position={"fixed"}
|
|
top={"0px"}
|
|
zIndex={888}
|
|
backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
alignItems={"center"}
|
|
width={"100%"}
|
|
padding={"2rem 1rem"}
|
|
// paddingTop={"3rem"}
|
|
sx={{
|
|
"@media (max-width: 1024px)": {},
|
|
"@media (max-width: 375px)": {
|
|
padding: "1rem",
|
|
alignItems: "baseline",
|
|
},
|
|
}}
|
|
>
|
|
<Box display={"flex"} alignItems={"center"}>
|
|
<Link to="/">
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"baseline"}
|
|
justifyContent={"center"}
|
|
>
|
|
<Image src={logo} width={"160px"} />
|
|
</Box>
|
|
</Link>
|
|
</Box>
|
|
<HamburgerIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
|
|
</Box>
|
|
|
|
<Box
|
|
position={"fixed"}
|
|
top={"0px"}
|
|
transform={menu ? "translateX(0)" : "translateX(100%)"}
|
|
transition={"all 0.6s ease-in-out"}
|
|
zIndex={999}
|
|
backgroundColor={"#101015"}
|
|
height={"100vh"}
|
|
width={"100%"}
|
|
overflow={"auto"}
|
|
opacity={menu ? 1 : 0}
|
|
>
|
|
<Box
|
|
// backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
alignItems={"center"}
|
|
padding={"2rem 1rem"}
|
|
marginBottom={"1rem"}
|
|
gap={"2rem"}
|
|
sx={{
|
|
"@media (max-width: 1024px)": {},
|
|
"@media (max-width: 375px)": {
|
|
padding: "1rem",
|
|
alignItems: "baseline",
|
|
},
|
|
}}
|
|
>
|
|
<Box display={"flex"} alignItems={"center"}>
|
|
<Link to="/" onClick={handleClick}>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"baseline"}
|
|
justifyContent={"center"}
|
|
>
|
|
<Image src={logo} width={"160px"} />
|
|
</Box>
|
|
</Link>
|
|
</Box>
|
|
<CloseIcon color={"#fff"} fontSize={"16px"} onClick={handleClick} />
|
|
</Box>
|
|
|
|
<Accordion allowToggle>
|
|
{/* Learn */}
|
|
<AccordionItem borderTop={"none"} padding={"1rem 1rem"}>
|
|
<AccordionButton>
|
|
<Box as="span" flex="1" textAlign="left">
|
|
<Text
|
|
color={"#B0B0B0"}
|
|
fontFamily={"Mona Sans"}
|
|
fontWeight={"500"}
|
|
fontSize={"16px"}
|
|
>
|
|
LEARN
|
|
</Text>
|
|
</Box>
|
|
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
|
</AccordionButton>
|
|
<AccordionPanel pb={4}>
|
|
<Link to="/LearnPage" style={innerLink} onClick={handleClick}>
|
|
Learn
|
|
</Link>
|
|
<Link
|
|
to="https://learn.rubix.net/pop/"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Proof-of-pledge Protocol
|
|
</Link>
|
|
<Link
|
|
to="https://learn.rubix.net/smartcontract/"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Smart Contracts
|
|
</Link>
|
|
<Link
|
|
to="https://learn.rubix.net/tokenomics/"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Tokenomics in Rubix
|
|
</Link>
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
|
|
{/* Build */}
|
|
<AccordionItem padding={"1rem 1rem"}>
|
|
<AccordionButton>
|
|
<Box as="span" flex="1" textAlign="left">
|
|
<Text
|
|
color={"#B0B0B0"}
|
|
fontFamily={"Mona Sans"}
|
|
fontWeight={"500"}
|
|
fontSize={"16px"}
|
|
>
|
|
BUILD
|
|
</Text>
|
|
</Box>
|
|
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
|
</AccordionButton>
|
|
<AccordionPanel pb={4}>
|
|
<Link to="/BuildPage" style={innerLink} onClick={handleClick}>
|
|
Build
|
|
</Link>
|
|
<Link
|
|
to="https://learn.rubix.net/node-setup/"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Set up Rubix Node
|
|
</Link>
|
|
<Link
|
|
to="https://learn.rubix.net/quorum/"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Quorum
|
|
</Link>
|
|
<Link
|
|
to="https://learn.rubix.net/subnets/"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Subnets
|
|
</Link>
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
|
|
{/* UseCases */}
|
|
<AccordionItem padding={"1rem 1rem"}>
|
|
<AccordionButton>
|
|
<Box as="span" flex="1" textAlign="left">
|
|
<Text
|
|
color={"#B0B0B0"}
|
|
fontFamily={"Mona Sans"}
|
|
fontWeight={"500"}
|
|
fontSize={"16px"}
|
|
>
|
|
USE CASES
|
|
</Text>
|
|
</Box>
|
|
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
|
</AccordionButton>
|
|
<AccordionPanel pb={4}>
|
|
{useCase?.map((slug) => (
|
|
<Box key={slug.id} style={{ flexBasis: "calc(50% - 1rem)" }}>
|
|
<Link
|
|
to={`/usecases/${slug.title_slug}`}
|
|
className="link"
|
|
style={
|
|
location.pathname === `/usecases/${slug.title_slug}`
|
|
? highlight
|
|
: normal
|
|
}
|
|
onClick={handleClick}
|
|
>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
justifyContent={"start"}
|
|
gap={"1rem"}
|
|
marginBottom={"1rem"}
|
|
>
|
|
<Text>{slug.title}</Text>
|
|
</Box>
|
|
</Link>
|
|
</Box>
|
|
))}
|
|
{/* <Link to="/fin-tech" style={innerLink} onClick={handleClick}>
|
|
FinTech
|
|
</Link>
|
|
<Link
|
|
to="/ad-tech"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
style={innerLink}
|
|
onClick={handleClick}
|
|
>
|
|
AdTech
|
|
</Link>
|
|
<Link
|
|
to="/mar-tech"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
style={innerLink}
|
|
onClick={handleClick}
|
|
>
|
|
MarTech
|
|
</Link>
|
|
<Link
|
|
to="/health-tech"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
style={innerLink}
|
|
onClick={handleClick}
|
|
>
|
|
HealthTech
|
|
</Link>
|
|
<Link
|
|
to="/identity-security"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
style={innerLink}
|
|
onClick={handleClick}
|
|
>
|
|
Identity and Security
|
|
</Link>
|
|
<Link
|
|
to="/Telecom"
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
style={innerLink}
|
|
onClick={handleClick}
|
|
>
|
|
Telecom
|
|
</Link> */}
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
|
|
{/* Community */}
|
|
<AccordionItem padding={"1rem 1rem"}>
|
|
<AccordionButton>
|
|
<Box as="span" flex="1" textAlign="left">
|
|
<Text
|
|
color={"#B0B0B0"}
|
|
fontFamily={"Mona Sans"}
|
|
fontWeight={"500"}
|
|
fontSize={"16px"}
|
|
>
|
|
COMMUNITY
|
|
</Text>
|
|
</Box>
|
|
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
|
</AccordionButton>
|
|
<AccordionPanel pb={4}>
|
|
<Link to="/community" style={innerLink} onClick={handleClick}>
|
|
Community
|
|
</Link>
|
|
<Link to="/news" style={innerLink} onClick={handleClick}>
|
|
News & Articles
|
|
</Link>
|
|
<Link
|
|
to="/resources-page"
|
|
style={innerLink}
|
|
onClick={handleClick}
|
|
>
|
|
Resources
|
|
</Link>
|
|
<Link to="/events" style={innerLink} onClick={handleClick}>
|
|
Events
|
|
</Link>
|
|
<Link to="/ecosystem" style={innerLink} onClick={handleClick}>
|
|
EcoSystem
|
|
</Link>
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
|
|
{/* Wallet*/}
|
|
<AccordionItem padding={"1rem 1rem"}>
|
|
<AccordionButton>
|
|
<Box as="span" flex="1" textAlign="left">
|
|
<Text
|
|
color={"#B0B0B0"}
|
|
fontFamily={"Mona Sans"}
|
|
fontWeight={"500"}
|
|
fontSize={"16px"}
|
|
>
|
|
AFFILIATES
|
|
</Text>
|
|
</Box>
|
|
<AccordionIcon color={"#fff"} fontSize={"28px"} />
|
|
</AccordionButton>
|
|
<AccordionPanel pb={4}>
|
|
<Link
|
|
to="https://getfexr.com/"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Wallet
|
|
</Link>
|
|
<Link
|
|
to="https://rubixexplorer.com/"
|
|
onClick={handleClick}
|
|
style={linkStyle}
|
|
>
|
|
Explorer
|
|
</Link>
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
<Link to="/Contact" onClick={handleClick}>
|
|
<Button
|
|
margin={"2rem 2rem"}
|
|
padding={"1.5rem 2rem"}
|
|
borderRadius="0px"
|
|
backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
|
|
>
|
|
CONTACT US
|
|
</Button>
|
|
</Link>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|