Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-29 01:35:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

installed swiper js

Browse Source
This commit is contained in:
rockyeverlast
2024-04-09 15:58:12 +05:30
parent cb330b7050
commit a328876fe5
8 changed files with 357 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
src/components/NavBar/NavBar.jsx
View File

@@ -52,170 +52,178 @@ const NavBar = () => {
<>
{!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 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>
</Link>
</Box>
<Box
display={"flex"}
gap={"49px"}
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: 1024px)": {
gap: "22px",
"@media (max-width: 996px)": {
justifyContent: "space-between",
},
"@media (max-width: 375px)": {
padding: "1rem",
},
}}
>
<Link
to="/LearnPage"
className="link"
style={{ position: "relative" }}
>
LEARN
<span
style={
location.pathname === "/LearnPage" ? active : linkStyle
}
/>
<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>
<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
<span
style={
location.pathname === "/community" ? active : linkStyle
}
/>
</Link>
<Link
to="/community"
className="link"
style={{ position: "relative" }}
>
COMMUNITY
<span
style={
location.pathname === "/community" ? active : linkStyle
}
/>
</Link>
<Link to="/" className="link" style={{ position: "relative" }}>
FOUNDATION
<span
style={
location.pathname === "/community" ? 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";
<Box
display={"flex"}
gap={"49px"}
alignItems={"center"}
sx={{
"@media (max-width: 1024px)": {
gap: "22px",
},
}}
>
CONTACT US
<span
style={location.pathname === "/Contact" ? active : linkStyle}
/>
<Image
src={arrow}
className="arrow"
<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
<span
style={location.pathname === "/" ? active : linkStyle}
/>
</Link>
<Link
to="/community"
className="link"
style={{ position: "relative" }}
>
COMMUNITY
<span
style={
location.pathname === "/community" ? active : linkStyle
}
/>
</Link>
<Link to="/" className="link" style={{ position: "relative" }}>
FOUNDATION
<span
style={location.pathname === "/" ? active : linkStyle}
/>
</Link>
<Link
to="/Contact"
className="link"
style={{
transition: "transform 0.3s",
display: "flex",
alignItems: "center",
gap: "5px",
position: "relative",
}}
/>
</Link>
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>
</Box>
</>
) : (
<MobileMenu />