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 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-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