pyth-network_pyth-crosschain/governance/xc-admin/packages/xc-admin-frontend/components/layout/MobileMenu.tsx

import { gsap } from 'gsap'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useContext, useEffect, useRef } from 'react'
import { ClusterContext, DEFAULT_CLUSTER } from '../../contexts/ClusterContext'
import { BurgerState } from './Header'

import orb from '../../images/burger.png'

interface MenuProps {
  headerState: BurgerState
  setHeaderState: Function
}

const MobileMenu = ({ headerState, setHeaderState }: MenuProps) => {
  let burgerMenu = useRef(null)
  const router = useRouter()
  const { cluster } = useContext(ClusterContext)

  const navigation = [
    {
      name: 'Main',
      href: `/${cluster === DEFAULT_CLUSTER ? '' : `?cluster=${cluster}`}`,
      target: '_self',
    },
    {
      name: 'Pyth Network',
      href: 'https://pyth.network/',
      target: '_blank',
    },
  ]

  useEffect(() => {
    // close menu
    if (!headerState.opened) {
      gsap.to(burgerMenu.current, {
        duration: 0.3,
        ease: 'power4.out',
        css: { right: '-100%' },
      })
      gsap.set(document.body, { overflow: 'initial' })
    } else {
      // show menu
      gsap.to(burgerMenu.current, {
        duration: 0.3,
        ease: 'power4.out',
        css: { right: '0' },
      })
      gsap.set(document.body, { overflow: 'hidden' })
    }
  }, [headerState])

  return (
    <div
      ref={burgerMenu}
      className="fixed top-0 -right-full  z-30  h-full w-full overscroll-y-none bg-darkGray landscape:overflow-auto  "
    >
      <div className="relative flex min-h-[100vh] flex-col sm:justify-between">
        <Image
          src={orb}
          alt=""
          layout="fill"
          objectFit="cover"
          objectPosition="bottom center"
        />
        <div className="sm:after:gradient-border relative flex px-14 pt-16 sm:flex-1 sm:items-center md:px-28 ">
          <div className="grid w-full sm:grid-cols-2">
            <ul className="list-none pt-5 sm:pt-10">
              {navigation.map((item) => (
                <li key={item.name} className="mb-5 sm:mb-10">
                  <Link href={item.href}>
                    <a
                      target={item.target}
                      className=" inline-block font-body  text-4xl leading-none tracking-wide transition-colors hover:text-white"
                      aria-current={
                        router.pathname === item.href ? 'page' : undefined
                      }
                    >
                      {item.name}
                    </a>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

export default MobileMenu