94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
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
|