154 lines
4.1 KiB
JavaScript
154 lines
4.1 KiB
JavaScript
import { Box, Button, Container, Image } from "@chakra-ui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Link, NavLink, useNavigate } from "react-router-dom";
|
|
import { ChevronDownIcon } from "@chakra-ui/icons";
|
|
import { Link as ScrollLink, animateScroll as scroll } from "react-scroll";
|
|
import logo from "../assets/logo.png";
|
|
import earth from "../assets/earth.png";
|
|
|
|
export const nav = [
|
|
{
|
|
title: "Investment",
|
|
path: "investment",
|
|
},
|
|
{
|
|
title: "How it works",
|
|
path: "how-it-works",
|
|
},
|
|
{
|
|
title: "FAQ",
|
|
path: "faq",
|
|
},
|
|
{
|
|
title: "About Us",
|
|
path: "aboutus",
|
|
},
|
|
];
|
|
|
|
const Header = () => {
|
|
const [showHeader, setShowHeader] = useState(true);
|
|
const [lastScrollY, setLastScrollY] = useState(0);
|
|
const navigate = useNavigate();
|
|
const threshold = 0;
|
|
|
|
const controlHeader = () => {
|
|
if (window.scrollY > lastScrollY + threshold) {
|
|
setShowHeader(false);
|
|
} else if (window.scrollY < lastScrollY - threshold) {
|
|
setShowHeader(true);
|
|
}
|
|
setLastScrollY(window.scrollY);
|
|
};
|
|
|
|
useEffect(() => {
|
|
window.addEventListener("scroll", controlHeader);
|
|
return () => {
|
|
window.removeEventListener("scroll", controlHeader);
|
|
};
|
|
}, [lastScrollY]);
|
|
|
|
const handleNavClick = (path) => {
|
|
if (path === "aboutus") {
|
|
navigate(`/${path}`);
|
|
} else {
|
|
navigate("/");
|
|
}
|
|
};
|
|
|
|
const handleLanguageChange = (e) => {
|
|
const language = e.target.value;
|
|
const googleTranslateElement = document.querySelector(
|
|
"#google_translate_element select"
|
|
);
|
|
if (googleTranslateElement) {
|
|
googleTranslateElement.value = language;
|
|
googleTranslateElement.dispatchEvent(new Event("change"));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
zIndex={100}
|
|
top={showHeader ? 0 : "-80px"}
|
|
transition="top 0.3s"
|
|
position={"sticky"}
|
|
backgroundColor={"#002F0F"}
|
|
>
|
|
<Container
|
|
p={4}
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
maxW="container.xl"
|
|
>
|
|
<Link to={"/"} onClick={() => scroll.scrollToTop()}>
|
|
<Image src={logo} h={8} />
|
|
</Link>
|
|
<Box display={"flex"} gap={6}>
|
|
{nav.map(({ title, path }, index) =>
|
|
path === "aboutus" ? (
|
|
<NavLink
|
|
key={index}
|
|
style={{
|
|
textDecoration: "none",
|
|
color: "white",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
to={`/${path}`}
|
|
onClick={() => handleNavClick(path)}
|
|
>
|
|
{title}
|
|
</NavLink>
|
|
) : (
|
|
<ScrollLink
|
|
key={index}
|
|
activeClass="active"
|
|
style={{
|
|
textDecoration: "none",
|
|
color: "white",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
cursor: "pointer",
|
|
}}
|
|
to={path}
|
|
spy={true}
|
|
smooth={true}
|
|
offset={0}
|
|
duration={300}
|
|
onClick={() => handleNavClick(path)}
|
|
>
|
|
{title}
|
|
</ScrollLink>
|
|
)
|
|
)}
|
|
</Box>
|
|
<Box display={"flex"} alignItems={"center"} gap={4}>
|
|
<Box display={"flex"} alignItems={"center"} gap={1} color="white">
|
|
<Image src={earth} h={4} me={1} />
|
|
<Box
|
|
as="select"
|
|
onChange={handleLanguageChange}
|
|
bg="transparent"
|
|
color="white"
|
|
border="none"
|
|
cursor="pointer"
|
|
appearance="none"
|
|
>
|
|
<option className="rounded-0 text-dark" value="en">
|
|
En
|
|
</option>
|
|
<option value="ur text-dark">Ur</option>
|
|
</Box>
|
|
</Box>
|
|
<Button color={"#002F0F"} ps={6} pe={6} size={"sm"} rounded={"xl"}>
|
|
Contact Us
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
<Box id="google_translate_element" display="block" />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Header;
|