Merge branch 'main' into wider-search

app/product/[handle]/page.tsx

@@ -23,17 +23,17 @@ export async function generateMetadata({
   if (!product) return notFound();
 
   const { url, width, height, altText: alt } = product.featuredImage || {};
-  const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+  const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
 
   return {
     title: product.seo.title || product.title,
     description: product.seo.description || product.description,
     robots: {
-      index: hide,
-      follow: hide,
+      index: indexable,
+      follow: indexable,
       googleBot: {
-        index: hide,
-        follow: hide
+        index: indexable,
+        follow: indexable
       }
     },
     openGraph: url

components/cart/modal.tsx

@@ -25,7 +25,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
   const closeCart = () => setIsOpen(false);
 
   useEffect(() => {
-    // Open cart modal when when quantity changes.
+    // Open cart modal when quantity changes.
     if (cart?.totalQuantity !== quantityRef.current) {
       // But only if it's not already open (quantity also changes when editing items in cart).
       if (!isOpen) {

components/layout/footer-menu.tsx

@@ -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
           }

components/layout/footer.tsx

@@ -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"
           >

components/layout/navbar/mobile-menu.tsx

@@ -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>