cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Changes mobile menu animation to be consistent with cart animation. (#1015)

Browse Source
This commit is contained in:
Michael Novotny 2023-05-11 12:53:04 -07:00 committed by GitHub
parent a5e799b16e
commit a0c0d10fae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
components/layout/navbar/mobile-menu.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import { Dialog } from '@headlessui/react'; import { Dialog } from '@headlessui/react';
import { motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import Link from 'next/link'; import Link from 'next/link';
import { usePathname, useSearchParams } from 'next/navigation'; import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -42,57 +42,77 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
> >
<MenuIcon className="h-6" /> <MenuIcon className="h-6" />
</button> </button>
<Dialog <AnimatePresence initial={false}>
open={mobileMenuIsOpen} {mobileMenuIsOpen && (
onClose={() => { <Dialog
setMobileMenuIsOpen(false);
}}
className="relative z-50"
>
<div className="fixed inset-0 flex justify-end" data-testid="mobile-menu">
<Dialog.Panel
as={motion.div} as={motion.div}
variants={{ initial="closed"
open: { opacity: 1 } animate="open"
exit="closed"
key="dialog"
static
open={mobileMenuIsOpen}
onClose={() => {
setMobileMenuIsOpen(false);
}} }}
className="flex w-full flex-col bg-white pb-6 dark:bg-black" className="relative z-50"
> >
<div className="p-4"> <motion.div
<button variants={{
className="mb-4" open: { opacity: 1, backdropFilter: 'blur(0.5px)' },
onClick={() => { closed: { opacity: 0, backdropFilter: 'blur(0px)' }
setMobileMenuIsOpen(false); }}
className="fixed inset-0 bg-black/30"
aria-hidden="true"
/>
<div className="fixed inset-0 flex justify-end" data-testid="mobile-menu">
<Dialog.Panel
as={motion.div}
variants={{
open: { translateX: 0 },
closed: { translateX: '-100%' }
}} }}
aria-label="Close mobile menu" transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
data-testid="close-mobile-menu" className="flex w-full flex-col bg-white pb-6 dark:bg-black"
> >
<CloseIcon className="h-6" /> <div className="p-4">
</button> <button
className="mb-4"
onClick={() => {
setMobileMenuIsOpen(false);
}}
aria-label="Close mobile menu"
data-testid="close-mobile-menu"
>
<CloseIcon className="h-6" />
</button>
<div className="mb-4 w-full"> <div className="mb-4 w-full">
<Search /> <Search />
</div> </div>
{menu.length ? ( {menu.length ? (
<ul className="flex flex-col"> <ul className="flex flex-col">
{menu.map((item: Menu) => ( {menu.map((item: Menu) => (
<li key={item.title}> <li key={item.title}>
<Link <Link
href={item.path} href={item.path}
className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white" className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
onClick={() => { onClick={() => {
setMobileMenuIsOpen(false); setMobileMenuIsOpen(false);
}} }}
> >
{item.title} {item.title}
</Link> </Link>
</li> </li>
))} ))}
</ul> </ul>
) : null} ) : null}
</div>
</Dialog.Panel>
</div> </div>
</Dialog.Panel> </Dialog>
</div> )}
</Dialog> </AnimatePresence>
</> </>
); );
} }