'use client'; import { Dialog, Transition } from '@headlessui/react'; import CloseIcon from 'components/icons/close'; import MenuIcon from 'components/icons/menu'; import { useLocale, useTranslations } from 'next-intl'; import Link from 'next/link'; import { Fragment, useRef, useState } from 'react'; import { LanguageControl, SupportedLocale } from '../navbar/language-control'; export function MenuModal() { const t = useTranslations('Index'); const locale = useLocale(); let [isOpen, setIsOpen] = useState(false); let closeButtonRef = useRef(null); const close = () => { setIsOpen(false); }; return ( <> <button type="button" onClick={() => setIsOpen(true)} className="transition-all ease-in-out hover:scale-110" > <MenuIcon /> </button> <Transition show={isOpen} as={Fragment}> <Dialog onClose={() => setIsOpen(false)}> {/* Use one Transition.Child to apply one transition to the backdrop... */} <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" > <div className="fixed inset-0 z-20" /> </Transition.Child> <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0 scale-95" enterTo="opacity-100 scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > <div className="fixed inset-0 z-30 backdrop-blur-sm"> <Dialog.Panel> <div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-6"> <div className="flex flex-row space-x-6"> <LanguageControl lang={locale as SupportedLocale} /> <button ref={closeButtonRef} onClick={close} className=""> <CloseIcon className="h-10 w-10 stroke-current transition-opacity duration-150 hover:opacity-50" /> </button> </div> </div> <div className="fixed inset-0 grid grid-cols-1 place-content-center bg-dark/80"> <div className="flex flex-row justify-end"> <nav className="flex flex-col space-y-4 px-6 text-right"> <div> <Link href="/products" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.products')} </Link> </div> <div> <Link href="/shop-list" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.shops')} </Link> </div> <div> <Link href="/about" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.about')} </Link> </div> <div> <Link href="/bar" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.bar')} </Link> </div> <div> <Link href="/concept" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.concept')} </Link> </div> <div> <Link href="/stories" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.stories')} </Link> </div> <div> <Link href="/company" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.company')} </Link> </div> <div> <Link href="/contact" className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50" > {t('menu.contact')} </Link> </div> </nav> </div> </div> </Dialog.Panel> </div> </Transition.Child> </Dialog> </Transition> </> ); }