'use client'; import { Dialog, Transition } from '@headlessui/react'; import clsx from 'clsx'; 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({ scrolled }: { scrolled: boolean }) { 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)}> <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" enterTo="opacity-100 scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 scale-100" leaveTo="opacity-0" > <div className="fixed inset-0 z-30 bg-dark/80 backdrop-blur-sm"> <Dialog.Panel> <div className="z-40 mx-auto max-w-screen-xl px-6"> <div className={clsx( 'flex flex-row justify-end space-x-6 px-2', scrolled ? 'py-0' : 'py-0 md:py-6' )} > <LanguageControl lang={locale as SupportedLocale} /> <button ref={closeButtonRef} onClick={close}> <CloseIcon className="h-10 w-10 stroke-current transition-opacity duration-150 hover:opacity-50" /> </button> </div> <div className="grid h-[calc(100vh-124px)] grid-cols-1 place-content-center"> <div className="flex flex-row justify-end"> <nav className="flex flex-col space-y-4 px-4 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> </div> </Dialog.Panel> </div> </Transition.Child> </Dialog> </Transition> </> ); }