SGPT/src/shared/components/Header.tsx

import React, { useEffect } from "react";
import {useTranslation } from "react-i18next";
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";
import { MdLanguage } from "react-icons/md";
import { locales, resources } from "../../i18n/i18n";

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);
  const { i18n } = useTranslation();
  const currentLanguage = locales[i18n.language as keyof typeof locales ]
  const languages = Object.keys(resources)
  console.log(Object.keys(resources));
  console.log(currentLanguage);
  React.useEffect(() => {
    // check is mobile
    if (window.innerWidth <= 768) {
      setIsMobile(true);
    } else {
      setIsMobile(false);
    }
    console.log(window.innerWidth);

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

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

  const openLocalPdf = () => {
    const pdf = Whitepaper;
    window.open(pdf);
  };
  const changeLanguage = (lng: string)=>{
    i18n.changeLanguage(lng)
  }
  return (
    <>
      {isScrolled ? (
        <div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800">
          <div className="container mx-auto flex justify-between items-center ">
            <div
              className="flex gap-2 items-center cursor-pointer hover:text-orange-400"
              onClick={() => backToHome()}
            >
              <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 hover:text-orange-400  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 transform motion-safe:hover:scale-110 hover:text-orange-500">
                          {item.name}
                        </p>
                      </li>
                    ))}
                  </ul>

                  <div className="flex gap-4">
                    <Button size="sm" onClick={() => openLocalPdf()}>
                      <div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
                        <BsNewspaper />
                        Whitepaper
                      </div>
                    </Button>
                    <Button size="sm">
                      <div className="flex items-center gap-2 shadow-slate-50 transform motion-safe:hover:scale-110">
                        <BsGithub />
                        Audit
                      </div>
                    </Button>
                  </div>
                </div>
              )
            }

            {
              // Mobile menu
              isMobile && isOpenMenu ? (
                <div className="fixed top-12 right-0 py-4 pl-6 pr-10  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 text-white items-center gap-x-2 cursor-pointer group relative" >
            <MdLanguage className="text-[24px]" />
            <span className="group-hover:text-orange-400">{currentLanguage}</span>
            <div className=" h-40 w-[140px]  absolute top-3"></div>
            <ul className="hidden group-hover:flex animate-show-list-language  absolute top-10 flex-col gap-y-4 ">
              {languages.map((lng)=>(
                <>
                <li className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show" onClick={()=>changeLanguage(lng)}>
                  {locales[lng as keyof typeof locales]}
                <div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show  group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
                </li>
                
                </>
              ))}
            </ul>
          </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 hover:text-orange-400">
                      {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;