Merge pull request #62 from PotLock/feat/8-navbar

Mobile view; Cart button; Cart notification
PotLock · Jun 7, 2024 · 3cd02ed · 3cd02ed
2 parents 3afdc70 + 027752b
commit 3cd02ed
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 65 deletions.
diff --git a/src/app/_layout/Nav.tsx b/src/app/_layout/Nav.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 import Image from "next/image";
 import Link from "next/link";
@@ -14,6 +14,25 @@ import routesPath from "@/modules/core/routes";
 
 import UserDropdown from "../_components/UserDropdown";
 
+const tabOptions = [
+  {
+    text: "Projects",
+    link: routesPath.PROJECTS_LIST,
+    disabled: false,
+  },
+  { text: "Feed", link: "feed", disabled: false },
+  {
+    text: "Pots",
+    link: routesPath.POTS,
+    disabled: false,
+  },
+  {
+    text: "Donors",
+    link: routesPath.DONORS,
+    disabled: false,
+  },
+];
+
 const AuthButton = () => {
   const { isAuthenticated } = useAuth();
   const isClient = useIsClient();
@@ -25,93 +44,148 @@ const AuthButton = () => {
   if (!isClient) return;
 
   if (isAuthenticated) {
-    return (
-      <UserDropdown />
-      //   <Button
-      //     variant="standard-filled"
-      //     onClick={logoutHandler}
-      //     className="bg-[#342823]"
-      //   >
-      //     Logout
-      //   </Button>
-    );
+    return <UserDropdown />;
   }
 
   return (
     <Button
+      font="semibold"
       variant="standard-filled"
       onClick={loginHandler}
-      className="bg-[#342823]"
+      className="border-none bg-[#342823] shadow-none"
     >
-      Login
+      Sign In
     </Button>
   );
 };
 
-const Nav = () => {
+const MobileMenuButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <button
+      type="button"
+      className="flex items-center justify-between focus:outline-none md:hidden"
+      onClick={onClick}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z"
+          fill="#7B7B7B"
+        />
+      </svg>
+    </button>
+  );
+};
+
+const MobileNav = () => {
   const isClient = useIsClient();
   const pathname = usePathname();
 
-  const tabOptions = [
-    {
-      text: "Projects",
-      link: routesPath.PROJECTS_LIST,
-      disabled: false,
-    },
-    { text: "Feed", link: "feed", disabled: false },
-    {
-      text: "Pots",
-      link: routesPath.POTS,
-      disabled: false,
-    },
-    {
-      text: "Donors",
-      link: routesPath.DONORS,
-      disabled: false,
-    },
-  ];
-
   return (
-    <nav className="container z-50 flex h-[110px] content-between items-center justify-between self-stretch bg-white px-[40px] pb-6 md:h-[96px] md:pr-2 md:pt-6">
-      {/* Left */}
-      <div className="flex">
-        <div className="mr-12 flex flex-row items-center justify-center">
-          {/* Logo */}
+    <nav className="flex flex-col gap-4 p-6">
+      {tabOptions.map((tab) => {
+        const selected = isClient ? tab.link === pathname : false;
+
+        return (
           <Link
-            href="/"
-            className="decoration-none hover:decoration-none mr-12 flex items-baseline gap-2 text-center text-2xl font-bold text-[color:var(--neutral-900)] sm:mr-4 sm:text-xl"
+            key={tab.text}
+            href={tab.link}
+            className={`${selected ? "font-medium text-[color:var(--neutral-900)]" : "font-normal text-[color:var(--neutral-500)]"} decoration-none not-last-child hover:decoration-none relative mr-8 text-sm`}
           >
-            <Image
-              src="https://ipfs.near.social/ipfs/bafkreiafms2jag3gjbypfceafz2uvs66o25qc7m6u6hkxfyrzfoeyvj7ru"
-              alt="logo"
-              width={28.72}
-              height={23.94}
-            />
-            POTLOCK
+            {tab.text}
           </Link>
+        );
+      })}
+    </nav>
+  );
+};
+
+const CartLink = () => {
+  // TODO: number of cart items
+  const numCartItems = Math.round(Math.random() * 5);
+
+  return (
+    <Link
+      href={routesPath.CART}
+      className="flex flex-row items-center justify-center rounded-[6px] bg-[rgb(46,46,46)] px-4 py-[9.5px] text-[14px] font-semibold text-white"
+    >
+      Cart
+      {numCartItems > 0 && (
+        <div className="ml-2 flex h-[18px] w-[18px] flex-row items-center justify-center rounded-full bg-[#f86b3f]">
+          <p className="ml-[-1px] mt-[2px] text-center text-[10px] font-bold">
+            {numCartItems}
+          </p>
         </div>
+      )}
+    </Link>
+  );
+};
+
+const Nav = () => {
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const isClient = useIsClient();
+  const pathname = usePathname();
+
+  return (
+    <div>
+      <nav className="container z-50 flex content-between items-center justify-between self-stretch bg-white px-[40px] pb-6 pt-6 max-sm:px-1 md:h-[96px] md:pr-2">
+        {/* Left */}
+        <div className="flex">
+          <div className="mr-12 flex flex-row items-center justify-center">
+            {/* Logo */}
+            <Link
+              href="/"
+              className="decoration-none hover:decoration-none mr-12 flex items-baseline gap-2 max-sm:mr-0 sm:mr-4"
+            >
+              <Image
+                src="https://ipfs.near.social/ipfs/bafkreiafms2jag3gjbypfceafz2uvs66o25qc7m6u6hkxfyrzfoeyvj7ru"
+                alt="logo"
+                width={28.72}
+                height={23.94}
+              />
+              <p className="text-center text-xl font-bold text-[color:var(--neutral-900)] max-sm:hidden">
+                POTLOCK
+              </p>
+            </Link>
+          </div>
 
-        <div className="flex flex-row items-center justify-center">
           <div className="flex flex-row items-center justify-center">
-            {tabOptions.map((tab) => {
-              const selected = isClient ? tab.link === pathname : false;
-
-              return (
-                <Link
-                  key={tab.text}
-                  href={tab.link}
-                  className={`${selected ? "font-medium text-[color:var(--neutral-900)]" : "font-normal text-[color:var(--neutral-500)]"} decoration-none not-last-child hover:decoration-none relative mr-8 text-sm`}
-                >
-                  {tab.text}
-                </Link>
-              );
-            })}
+            <div className="flex flex-row items-center justify-center max-md:hidden">
+              {tabOptions.map((tab) => {
+                const selected = isClient ? tab.link === pathname : false;
+
+                return (
+                  <Link
+                    key={tab.text}
+                    href={tab.link}
+                    className={`${selected ? "font-medium text-[color:var(--neutral-900)]" : "font-normal text-[color:var(--neutral-500)]"} decoration-none not-last-child hover:decoration-none relative mr-8 text-sm`}
+                  >
+                    {tab.text}
+                  </Link>
+                );
+              })}
+            </div>
+            <CartLink />
           </div>
         </div>
-      </div>
-      {/* Right */}
-      <AuthButton />
-    </nav>
+        {/* Right */}
+        <div className="flex gap-4">
+          <AuthButton />
+          <MobileMenuButton
+            onClick={() => {
+              setShowMobileMenu(!showMobileMenu);
+            }}
+          />
+        </div>
+      </nav>
+      {/* Mobile Nav */}
+      <div className="md:hidden">{showMobileMenu && <MobileNav />}</div>
+    </div>
   );
 };
 

diff --git a/src/common/ui/components/button.tsx b/src/common/ui/components/button.tsx
@@ -39,6 +39,7 @@ const buttonVariants = cva(
       font: {
         default: "font-medium",
         bold: "font-bold",
+        semibold: "font-semibold",
       },
     },
     defaultVariants: {