109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { Dialog, Transition } from '@headlessui/react'
|
||
|
|
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
|
||
|
|
import { Fragment, useState, useEffect, useRef } from 'react'
|
||
|
|
import Link from './Link'
|
||
|
|
import headerNavLinks from '@/data/headerNavLinks'
|
||
|
|
|
||
|
|
const MobileNav = () => {
|
||
|
|
const [navShow, setNavShow] = useState(false)
|
||
|
|
const navRef = useRef(null)
|
||
|
|
|
||
|
|
const onToggleNav = () => {
|
||
|
|
setNavShow((status) => {
|
||
|
|
if (status) {
|
||
|
|
enableBodyScroll(navRef.current)
|
||
|
|
} else {
|
||
|
|
// Prevent scrolling
|
||
|
|
disableBodyScroll(navRef.current)
|
||
|
|
}
|
||
|
|
return !status
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
return clearAllBodyScrollLocks
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
viewBox="0 0 20 20"
|
||
|
|
fill="currentColor"
|
||
|
|
className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<Transition appear show={navShow} as={Fragment} unmount={false}>
|
||
|
|
<Dialog as="div" onClose={onToggleNav} unmount={false}>
|
||
|
|
<Transition.Child
|
||
|
|
as={Fragment}
|
||
|
|
enter="ease-out duration-300"
|
||
|
|
enterFrom="opacity-0"
|
||
|
|
enterTo="opacity-100"
|
||
|
|
leave="ease-in duration-200"
|
||
|
|
leaveFrom="opacity-100"
|
||
|
|
leaveTo="opacity-0"
|
||
|
|
unmount={false}
|
||
|
|
>
|
||
|
|
<div className="fixed inset-0 z-60 bg-black/25" />
|
||
|
|
</Transition.Child>
|
||
|
|
|
||
|
|
<Transition.Child
|
||
|
|
as={Fragment}
|
||
|
|
enter="transition ease-in-out duration-300 transform"
|
||
|
|
enterFrom="translate-x-full opacity-0"
|
||
|
|
enterTo="translate-x-0 opacity-95"
|
||
|
|
leave="transition ease-in duration-200 transform"
|
||
|
|
leaveFrom="translate-x-0 opacity-95"
|
||
|
|
leaveTo="translate-x-full opacity-0"
|
||
|
|
unmount={false}
|
||
|
|
>
|
||
|
|
<Dialog.Panel className="fixed left-0 top-0 z-70 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
|
||
|
|
<nav
|
||
|
|
ref={navRef}
|
||
|
|
className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
|
||
|
|
>
|
||
|
|
{headerNavLinks.map((link) => (
|
||
|
|
<Link
|
||
|
|
key={link.title}
|
||
|
|
href={link.href}
|
||
|
|
className="mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
|
||
|
|
onClick={onToggleNav}
|
||
|
|
>
|
||
|
|
{link.title}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<button
|
||
|
|
className="fixed right-4 top-7 z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
|
||
|
|
aria-label="Toggle Menu"
|
||
|
|
onClick={onToggleNav}
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||
|
|
<path
|
||
|
|
fillRule="evenodd"
|
||
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||
|
|
clipRule="evenodd"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</Dialog.Panel>
|
||
|
|
</Transition.Child>
|
||
|
|
</Dialog>
|
||
|
|
</Transition>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MobileNav
|