tanami/src/Components/Header.jsx

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;