chore: update config

.env.local.default

@@ -6,5 +6,3 @@ NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
 
 # ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost
-
-

.env.local.example

@@ -1,3 +1,4 @@
+COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE_PLATFORM"
 # ~~~
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
 
@@ -7,4 +8,3 @@ NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"
 # ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost
 
-

.env.test

@@ -6,5 +6,3 @@ NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
 
 # ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost
-
-

README.md

@@ -9,8 +9,6 @@
 
 An Onchain Commerce Template build with [OnchainKit](https://onchainkit.xyz), and ready to be deployed to Vercel.
 
-Play with it live on https://onchain-commerce-template.vercel.app
-
 Have fun! ⛵️
 
 <br />
@@ -34,6 +32,8 @@ COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE"
 
 ## Locally run
 
+
+
 ```sh
 # Install bun in case you don't have it
 bun curl -fsSL <https://bun.sh/install> | bash

src/components/Navbar.tsx

@@ -1,28 +1,35 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import {
   GITHUB_LINK,
   ONCHAINKIT_LINK,
   TEMPLATE_LINK,
   TWITTER_LINK,
 } from 'src/links';
+import { ExternalLinkSvg } from 'src/svg/ExternalLinkSvg';
+import { MenuSvg } from 'src/svg/MenuSvg';
 import OnchainKitShopSvg from 'src/svg/OnchainKitShopSvg';
 import type { NavbarLinkReact } from 'src/types';
 
 function NavbarLink({ link, label }: NavbarLinkReact) {
   return (
-    <li>
+    <li className="flex cursor-pointer items-center gap-2">
       <a
         href={link}
         className="flex items-center text-gray-600 text-xs hover:text-gray-900"
       >
         {label}
       </a>
+      <ExternalLinkSvg />
     </li>
   );
 }
 
 export default function Navbar() {
-  const [isMenuOpen, _] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = useCallback(() => {
+    setIsMenuOpen((prev) => !prev);
+  }, []);
 
   return (
     <header className="-mx-[50vw] fixed top-0 right-1/2 left-1/2 w-screen border-gray-200 border-b bg-white">
@@ -42,6 +49,9 @@ export default function Navbar() {
               <NavbarLink link={TWITTER_LINK} label="X" />
             </ul>
           </nav>
+          <button type="button" className="md:hidden" onClick={toggleMenu}>
+            <MenuSvg />
+          </button>
         </div>
       </div>
       {isMenuOpen && (

src/components/OnchainStore.tsx

@@ -10,7 +10,7 @@ export default function OnchainStore() {
       <div className="flex h-full max-h-screen max-w-full flex-col px-1">
         <Navbar />
         <main className="mx-auto flex max-w-7xl grow flex-col py-10">
-          <div className="flex grow flex-col md:flex-row">
+          <div className="flex grow flex-col pb-10 md:flex-row">
             <OnchainStoreSummary />
             <OnchainStoreItems />
           </div>

src/components/OnchainStoreItems.tsx

@@ -5,7 +5,7 @@ export default function OnchainStoreItems() {
   const { products } = useOnchainStoreContext();
 
   return (
-    <div className="scroll mb-8 p-8 md:mb-0">
+    <div className="scroll mb-16 p-8 md:mb-0">
       <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
         {products?.map((item) => (
           <OnchainStoreItem {...item} key={item.id} />

src/components/OnchainStoreSummary.tsx

@@ -1,6 +1,6 @@
 export default function OnchainStoreSummary() {
   return (
-    <div className="mb-8 flex flex-col justify-center border-gray-200 border-r p-8 md:mb-0 md:w-1/3">
+    <div className="mb-8 flex flex-col justify-center border-gray-200 border-r p-8 md:mb-0 md:w-1/3 lg:border-r">
       <div className="space-y-4 text-left">
         <h2
           className="font-bold text-3xl leading-tight"

src/svg/ExternalLinkSvg.tsx

@@ -0,0 +1,14 @@
+export function ExternalLinkSvg() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      className="pb-1 md:pb-0"
+    >
+      <title>ExternalLinkSvg</title>
+      <path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" />
+    </svg>
+  );
+}

src/svg/MenuSvg.tsx

@@ -0,0 +1,13 @@
+export function MenuSvg() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+    >
+      <title>MenuSvg</title>
+      <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z" />
+    </svg>
+  );
+}