crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 14:42:31 +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]);
return (
<li className="mt-2 first:mt-1">
<li>
<Link
href={item.path}
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
}

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">
<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>
<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" />
<span className="uppercase">{SITE_NAME}</span>
</Link>
@ -40,7 +40,7 @@ export default async function Footer() {
</Suspense>
<div className="md:ml-auto">
<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"
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 (
<>
<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>