crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes mobile tap targets (#1129)

Browse Source 
Co-authored-by: Lee Robinson <lrobinson2011@gmail.com>
This commit is contained in:
Michael Novotny
2023-07-31 09:09:56 -05:00
committed by GitHub
parent 10b1d4bbae
commit 455a7327f3
3 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,8 +32,12 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
return (
<>
<button onClick={openMobileMenu} aria-label="Open mobile menu" className="md:hidden">
<Bars3Icon className="h-6" />
<button
onClick={openMobileMenu}
aria-label="Open mobile menu"
className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
>
<Bars3Icon className="h-4" />
</button>
<Transition show={isOpen}>
<Dialog onClose={closeMobileMenu} className="relative z-50">
@@ -59,7 +63,11 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
>
<Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
<div className="p-4">
<button className="mb-4" onClick={closeMobileMenu} aria-label="Close mobile menu">
<button
className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"
onClick={closeMobileMenu}
aria-label="Close mobile menu"
>
<XMarkIcon className="h-6" />
</button>
@@ -67,14 +75,13 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<Search />
</div>
{menu.length ? (
<ul className="flex flex-col">
<ul className="flex w-full flex-col">
{menu.map((item: Menu) => (
<li key={item.title}>
<Link
href={item.path}
className="rounded-lg py-1 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
onClick={closeMobileMenu}
>
<li
className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
key={item.title}
>
<Link href={item.path} onClick={closeMobileMenu}>
{item.title}
</Link>
</li>