crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-31 17:25:53 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/layout/footer-menu.tsx
View File

@ -15,11 +15,11 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
}, [pathname, item.path]); }, [pathname, item.path]);
return ( return (
<li className="mt-2 first:mt-1"> <li>
<Link <Link
href={item.path} href={item.path}
className={clsx( className={clsx(
'underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300', 'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
{ {
'text-black dark:text-neutral-300': active 'text-black dark:text-neutral-300': active
} }

4
components/layout/footer.tsx
View File

@ -19,7 +19,7 @@ export default async function Footer() {
<footer className="text-sm text-neutral-500 dark:text-neutral-400"> <footer className="text-sm text-neutral-500 dark:text-neutral-400">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0"> <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
<div> <div>
<Link className="flex items-center gap-2 text-black dark:text-white" href="/"> <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
<LogoSquare size="sm" /> <LogoSquare size="sm" />
<span className="uppercase">{SITE_NAME}</span> <span className="uppercase">{SITE_NAME}</span>
</Link> </Link>
@ -40,7 +40,7 @@ export default async function Footer() {
</Suspense> </Suspense>
<div className="md:ml-auto"> <div className="md:ml-auto">
<a <a
className="flex items-center gap-2 hover:text-black dark:hover:text-neutral-300" className="flex items-center gap-2 text-lg hover:text-black dark:hover:text-neutral-300 md:text-sm"
aria-label="Github Repository" aria-label="Github Repository"
href="https://github.com/vercel/commerce" href="https://github.com/vercel/commerce"
> >

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

@ -32,8 +32,12 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
return ( return (
<> <>
<button onClick={openMobileMenu} aria-label="Open mobile menu" className="md:hidden"> <button
<Bars3Icon className="h-6" /> 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> </button>
<Transition show={isOpen}> <Transition show={isOpen}>
<Dialog onClose={closeMobileMenu} className="relative z-50"> <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"> <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"> <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" /> <XMarkIcon className="h-6" />
</button> </button>
@ -67,14 +75,13 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<Search /> <Search />
</div> </div>
{menu.length ? ( {menu.length ? (
<ul className="flex flex-col"> <ul className="flex w-full flex-col">
{menu.map((item: Menu) => ( {menu.map((item: Menu) => (
<li key={item.title}> <li
<Link className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
href={item.path} key={item.title}
className="rounded-lg py-1 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white" >
onClick={closeMobileMenu} <Link href={item.path} onClick={closeMobileMenu}>
>
{item.title} {item.title}
</Link> </Link>
</li> </li>