adjust styles and navbar

README.md

@@ -35,6 +35,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,32 +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 { NavbarLinkReact } from "src/types";
 
 function NavbarLink({ link, label }: NavbarLinkReact) {
   return (
-    <li>
+    <li className="flex items-center gap-2 cursor-pointer">
       <a
         href={link}
         className="text-xs text-gray-600 hover:text-gray-900 flex items-center"
       >
         {label}
       </a>
+      <ExternalLinkSvg />
     </li>
   );
 }
 
 export default function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen);
-  };
+  const toggleMenu = useCallback(() => {
+    setIsMenuOpen((prev) => !prev);
+  }, []);
 
   return (
     <header className="border-b border-gray-200 w-screen fixed top-0 left-1/2 right-1/2 -mx-[50vw] bg-white">
@@ -46,9 +49,10 @@ export default function Navbar() {
               <NavbarLink link={TWITTER_LINK} label="X" />
             </ul>
           </nav>
-          {/* <button className="md:hidden" onClick={toggleMenu}>
-            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button> */}
+          <button className="md:hidden" onClick={toggleMenu}>
+            {/* {isMenuOpen && <MenuSvg />} */}
+            <MenuSvg />
+          </button>
         </div>
       </div>
       {isMenuOpen && (

src/components/OnchainStore.tsx

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

src/components/OnchainStoreCart.tsx

@@ -43,11 +43,11 @@ export default function OnchainStoreCart() {
   return (
     <div className="fixed bottom-0 bg-white border-t border-gray-200 w-screen left-1/2 right-1/2 -mx-[50vw]">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-0">
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-center py-4">
+        <div className="flex flex-col md:flex-row justify-between items-center py-4">
           <span className="text-xs text-gray-500 mb-2 md:mb-0 md:w-1/3 lg:pl-8">
             Built with OnchainKit
           </span>
-          <div className="w-full md:w-2/3 flex justify-between items-center md:pl-5 xl:pr-0 pr-8">
+          <div className="w-full md:w-2/3 flex flex-col pt-4 md:pt-0 md:flex-row justify-between items-center md:pl-5 xl:pr-0 md:pr-8">
             <h2 className="text-lg md:w-11/12 font-bold ">
               TOTAL {totalSum.toFixed(2)} USDC
             </h2>

src/components/OnchainStoreItems.tsx

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

src/components/OnchainStoreSummary.tsx

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

src/svg/ExternalLinkSvg.tsx

@@ -0,0 +1,13 @@
+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"
+    >
+      <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"
+    >
+      <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z" />
+    </svg>
+  );
+}