tanami/src/Components/Header.jsx

import { Box, Button, Container, Image } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import logo from "../assets/logo.png";
import earth from "../assets/earth.png";
import { Link, NavLink } from "react-router-dom";
import { ChevronDownIcon } from "@chakra-ui/icons";


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 threshold = 50; // Adjust this value to change sensitivity
  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]);

  return (
    <Box 
    zIndex={100}
    top={showHeader ? 0 : "-80px"}  // Adjust the -80px to match the height of your header
    transition="top 0.3s" position={"sticky"}  backgroundColor={"#002F0F"}>
      <Container
        p={4}
        display={"flex"}
        justifyContent={"space-between"}
        maxW="container.xl"
      >
        <Link to={"/"}>
        <Image src={logo} h={8} /></Link>
        <Box display={"flex"} gap={6}>
          {nav.map(({ title, path }, index) => (
            <NavLink
            key={index}
              style={{
                textDecoration: "none",
                color: "white",
                display: "flex",
                alignItems: "center",
              }}
              to={path}
            >
              {title}
            </NavLink>
          ))}
        </Box>

        <Box display={"flex"} alignItems={"center"} gap={4}>
          <span className="d-flex align-items-center gap-1 text-white">
            <Image src={earth} h={4} me={1} /> En <ChevronDownIcon />
          </span>
          <Button color={"#002F0F"} ps={6} pe={6} size={"sm"} rounded={"xl"}>
            Contact Us
          </Button>
        </Box>
      </Container>
    </Box>
  );
};

export default Header;