SGPT/src/shared/components/Header.tsx

import React from "react";
import Button from "./Button";

type Props = {};

const menuItems = [
  {
    name: "Home",
    path: "/",
    id: "home",
  },
  {
    name: "About",
    path: "",
    id: "about",
  },
  {
    name: "Tokenomics",
    path: "",
    id: "tokenomics",
  },
  {
    name: "Roadmap",
    path: "",
    id: "roadmap",
  },
];

const Header = (props: Props) => {
  const [isScrolled, setIsScrolled] = React.useState(false);

  React.useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 0) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    });
  }, []);

  const jumpToSection = (section: string) => {
    console.log("section", section);
    const element = document.getElementById(section);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <>
      {isScrolled ? (
        <div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800">
          <div className="container mx-auto flex justify-between items-center">
            <div>
              <h4 className="text-2xl transition-all duration-150 text-white uppercase font-bold">
                Logo
              </h4>
            </div>

            <div className="flex gap-10 items-center">
              <ul className="flex gap-10">
                {menuItems.map((item) => (
                  <li
                    className="inline-block"
                    key={item.path}
                    onClick={() => jumpToSection(item.id)}
                  >
                    <p className="text-white text-md transition-all duration-150">
                      {item.name}
                    </p>
                  </li>
                ))}
              </ul>

              <div className="flex gap-4">
                <Button size="sm">Whitepaper</Button>
                <Button size="sm">Audit</Button>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="fixed z-30 w-full p-5 transition-all duration-150">
          <div className="container mx-auto flex justify-between items-center">
            <div>
              <h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
                Logo
              </h4>
            </div>

            <div className="flex gap-10 items-center">
              <ul className="flex gap-10">
                {menuItems.map((item) => (
                  <li className="inline-block" key={item.path}>
                    <a
                      href="#"
                      className="text-white text-lg transition-all duration-150"
                    >
                      {item.name}
                    </a>
                  </li>
                ))}
              </ul>

              <div className="flex gap-4">
                <Button size="md">Whitepaper</Button>
                <Button size="md">Audit</Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Header;