SGPT/src/shared/components/Header.tsx

import React, { useEffect } from "react";
import Button from "./Button";
import robotLogo from "../../assets/images/robot-logo.png";
import { BsNewspaper, BsGithub } from "react-icons/bs";
import Whitepaper from "../../assets/Whitepaper.pdf";
type Props = {};

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

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

  React.useEffect(() => {
    // check is mobile
    if (window.innerWidth <= 768) {
      setIsMobile(true);
    } else {
      setIsMobile(false);
    }

    if (window.innerWidth <= 1024) {
      setIsScrolled(true);
    } else {
      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" });
    }
  };

  const openLocalPdf = () => {
    const pdf = Whitepaper;
    window.open(pdf);
  };

  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 className="flex gap-2 items-center">
              <div className="bg-white w-8 rounded-full overflow-hidden p-1">
                <img
                  src={robotLogo}
                  className="w-full transition-all duration-150 rounded-full"
                  alt=""
                />
              </div>
              <h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
                SGPT
              </h4>
            </div>

            {
              // Mobile menu
              isMobile ? (
                <div
                  className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer"
                  onClick={() => setIsOpenMenu(!isOpenMenu)}
                >
                  <div className="w-6 h-1 bg-white rounded-full"></div>
                  <div className="w-6 h-1 bg-white rounded-full"></div>
                  <div className="w-6 h-1 bg-white rounded-full"></div>
                </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 cursor-pointer">
                          {item.name}
                        </p>
                      </li>
                    ))}
                  </ul>

                  <div className="flex gap-4">
                    <Button size="sm" onClick={() => openLocalPdf()}>
                      <div className="flex items-center gap-2">
                        <BsNewspaper />
                        Whitepaper
                      </div>
                    </Button>
                    <Button size="sm">
                      <div className="flex items-center gap-2">
                        <BsGithub />
                        Audit
                      </div>
                    </Button>
                  </div>
                </div>
              )
            }

            {
              // Mobile menu
              isMobile && isOpenMenu ? (
                <div className="fixed top-11 right-5 p-4 bg-gray-800 z-40 rounded-xl">
                  <div className="flex flex-col items-center justify-center h-full">
                    <ul className="flex flex-col gap-3">
                      {menuItems.map((item) => (
                        <li
                          className="inline-block"
                          key={item.path}
                          onClick={() => jumpToSection(item.id)}
                        >
                          <p className="text-white text-md transition-all duration-150 cursor-pointer">
                            {item.name}
                          </p>
                        </li>
                      ))}
                      <li
                        className="inline-block"
                        onClick={() => openLocalPdf()}
                      >
                        <p className="text-white text-md transition-all duration-150 cursor-pointer">
                          Whitepaper
                        </p>
                      </li>
                      <li className="inline-block">
                        <p className="text-white text-md transition-all duration-150 cursor-pointer">
                          Audit
                        </p>
                      </li>
                    </ul>
                  </div>
                </div>
              ) : null
            }
          </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 className="flex gap-2 items-center">
              <div className="bg-white w-12 rounded-full overflow-hidden p-1">
                <img
                  src={robotLogo}
                  className="w-full transition-all duration-150 rounded-full"
                  alt=""
                />
              </div>
              <h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
                SGPT
              </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 cursor-pointer">
                      {item.name}
                    </p>
                  </li>
                ))}
              </ul>

              <div className="flex gap-4">
                <Button size="md" onClick={() => openLocalPdf()}>
                  <div className="flex items-center gap-2">
                    <BsNewspaper />
                    Whitepaper
                  </div>
                </Button>
                <Button size="md">
                  <div className="flex items-center gap-2">
                    <BsGithub />
                    Audit
                  </div>
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Header;