Next.js Commerce refresh. (#966)

We're making some updates to Next.js Commerce. Everything prior to this commit marks what we're calling [`v1`](https://github.com/vercel/commerce/releases/tag/v1) as a point in time to be able to reference and still use going into the future. The current architecture of Commerce is a multi-vendor, interoperable solution, including:

- [Shopify](https://shopify.vercel.store/)
- [Swell](https://swell.vercel.store/)
- [BigCommerce](https://bigcommerce.vercel.store/)
- [Vendure](https://vendure.vercel.store/)
- [Saleor](https://saleor.vercel.store/)
- [Ordercloud](https://ordercloud.vercel.store/)
- [Spree](https://spree.vercel.store/)
- [Kibo Commerce](https://kibocommerce.vercel.store/)
- [Commerce.js](https://commercejs.vercel.store/)
- [SalesForce Cloud Commerce](https://salesforce-cloud-commerce.vercel.store/)

All features can be toggled on or off, and it's easy to change between commerce providers. To support this, we needed to create a ["commerce metaframework"](d1d9e8c434/packages/commerce/new-provider.md) where providers could confirm to an API spec to add support for Next.js Commerce. While this worked and was successful for `v1`, we have different design goals and ambitions for `v2`.

**What You Need To Know**

- `v1` will not be updated moving forward. If you need to reference `v1`, you will still be able to clone and deploy the version tagged at this release.
- `v2` will be shifting to be a single provider vs. provider agnostic. Other providers are welcome to fork this repository and swap out the underlying `lib/` implementation that connects to the selected commerce provider (Shopify). This architecture was chosen to reduce the surface area of the codebase, remove the intermediate metaframework layer for provider-interoperability, and enable usage with the latest Next.js and React features.
- We will be sharing more about `v2` in the future as we continue to iterate before the marked release.

components/layout/navbar/mobile-menu.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { Dialog } from '@headlessui/react';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import CloseIcon from 'components/icons/close';
+import MenuIcon from 'components/icons/menu';
+import { Menu } from 'lib/shopify/types';
+import Search from './search';
+
+export default function MobileMenu({ menu }: { menu: Menu[] }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > 768) {
+        setMobileMenuIsOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [mobileMenuIsOpen]);
+
+  useEffect(() => {
+    setMobileMenuIsOpen(false);
+  }, [pathname, searchParams]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setMobileMenuIsOpen(!mobileMenuIsOpen);
+        }}
+        aria-label="Open mobile menu"
+        className="md:hidden"
+        data-testid="open-mobile-menu"
+      >
+        <MenuIcon className="h-6" />
+      </button>
+      <Dialog
+        open={mobileMenuIsOpen}
+        onClose={() => {
+          setMobileMenuIsOpen(false);
+        }}
+        className="relative z-50"
+      >
+        <div className="fixed inset-0 flex justify-end" data-testid="mobile-menu">
+          <Dialog.Panel
+            as={motion.div}
+            variants={{
+              open: { opacity: 1 }
+            }}
+            className="flex w-full flex-col bg-white pb-6 dark:bg-black"
+          >
+            <div className="p-4">
+              <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">
+                <Search />
+              </div>
+              {menu.length ? (
+                <ul className="flex 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-gray-500 dark:text-white"
+                        onClick={() => {
+                          setMobileMenuIsOpen(false);
+                        }}
+                      >
+                        {item.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+          </Dialog.Panel>
+        </div>
+      </Dialog>
+    </>
+  );
+}