feat: Navbar Icons improved

deco-sites · Jun 4, 2024 · 18adee5 · 18adee5
1 parent d07f3a8
commit 18adee5
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 27 deletions.
diff --git a/components/header/Buttons/Cart/common.tsx b/components/header/Buttons/Cart/common.tsx
@@ -10,9 +10,12 @@ interface Props {
   currency: string;
   total: number;
   items: AnalyticsItem[];
+  type?: "icon" | "completed";
 }
 
-function CartButton({ loading, currency, total, items }: Props) {
+function CartButton(
+  { loading, currency, total, items, type = "completed" }: Props,
+) {
   const { displayCart } = useUI();
   const totalItems = items.length;
 
@@ -24,6 +27,30 @@ function CartButton({ loading, currency, total, items }: Props) {
     displayCart.value = true;
   };
 
+  if (type === "icon") {
+    return (
+      <div class="indicator">
+        <span
+          class={`indicator-item badge badge-secondary bg-black text-white-normal badge-sm ${
+            totalItems === 0 ? "hidden" : ""
+          }`}
+        >
+          {totalItems > 9 ? "9+" : totalItems}
+        </span>
+
+        <Button
+          class="btn-circle btn-sm btn-ghost"
+          aria-label="open cart"
+          data-deco={displayCart.value && "open-cart"}
+          loading={loading}
+          onClick={onClick}
+        >
+          <Icon id="CartIcon" size={24} strokeWidth={2} class="text-red" />
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <Button
       data-deco={displayCart.value && "open-cart"}

diff --git a/components/header/Buttons/Cart/vtex.tsx b/components/header/Buttons/Cart/vtex.tsx
@@ -1,7 +1,11 @@
 import { itemToAnalyticsItem, useCart } from "apps/vtex/hooks/useCart.ts";
 import Button from "./common.tsx";
 
-function CartButton() {
+export interface Props {
+  type: "icon" | "completed";
+}
+
+function CartButton({ type = "completed" }: Props) {
   const { loading, cart } = useCart();
   const {
     totalizers = [],
@@ -23,6 +27,7 @@ function CartButton() {
       items={items.map((item, index) =>
         itemToAnalyticsItem({ ...item, coupon }, index)
       )}
+      type={type}
     />
   );
 }

diff --git a/components/header/Buttons/Menu.tsx b/components/header/Buttons/Menu.tsx
@@ -13,7 +13,7 @@ export default function MenuButton() {
         displayMenu.value = !displayMenu.value;
       }}
     >
-      <Icon id="Bars3" size={20} strokeWidth={0.01} />
+      <Icon id="Bars3" size={20} strokeWidth={0.01} class="text-red" />
     </Button>
   );
 }
diff --git a/components/header/Buttons/Search.tsx b/components/header/Buttons/Search.tsx
@@ -14,7 +14,12 @@ export default function SearchButton() {
           displaySearchPopup.value = !displaySearchPopup.value;
         }}
       >
-        <Icon id="MagnifyingGlass" size={20} strokeWidth={0.1} />
+        <Icon
+          id="MagnifyingGlass"
+          size={20}
+          strokeWidth={0.1}
+          class="text-red"
+        />
       </Button>
       <Button
         class="btn-circle btn-sm btn-ghost sm:hidden"
@@ -23,7 +28,12 @@ export default function SearchButton() {
           displaySearchDrawer.value = !displaySearchDrawer.value;
         }}
       >
-        <Icon id="MagnifyingGlass" size={20} strokeWidth={0.1} />
+        <Icon
+          id="MagnifyingGlass"
+          size={20}
+          strokeWidth={0.1}
+          class="text-red"
+        />
       </Button>
     </>
   );

diff --git a/components/header/Header.tsx b/components/header/Header.tsx
@@ -86,7 +86,7 @@ function Header({
           searchbar={searchbar}
           platform={platform}
         >
-          <div class="bg-base-100 fixed w-full z-50">
+          <div class="bg-base-100 fixed w-full z-40">
             {alerts && alerts.length > 0 && <Alert alerts={alerts} />}
             <Navbar
               items={items}

diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
@@ -29,28 +29,30 @@ function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
       {/* Mobile Version */}
       <div
         style={{ height: navbarHeight }}
-        class="lg:hidden grid grid-cols-3 justify-between items-center border-b border-base-200 w-full px-6 pb-6 gap-2"
+        class="lg:hidden grid grid-cols-2 justify-between items-center border-b border-base-200 w-full px-6 pb-6 gap-2"
       >
-        <MenuButton />
-        {logo && (
-          <a
-            href="/"
-            class="flex-grow inline-flex items-center justify-center"
-            style={{ minHeight: navbarHeight }}
-            aria-label="Store logo"
-          >
-            <Image
-              src={logo.src}
-              alt={logo.alt}
-              width={logo.width || 100}
-              height={logo.height || 13}
-            />
-          </a>
-        )}
+        <div class="flex justify-start items-center gap-4">
+          <MenuButton />
+          {logo && (
+            <a
+              href="/"
+              class="flex-grow inline-flex items-center justify-center"
+              style={{ minHeight: navbarHeight }}
+              aria-label="Store logo"
+            >
+              <Image
+                src={logo.src}
+                alt={logo.alt}
+                width={logo.width || 100}
+                height={logo.height || 13}
+              />
+            </a>
+          )}
+        </div>
 
         <div class="flex justify-end gap-1">
           <SearchButton />
-          {platform === "vtex" && <CartButtonVTEX />}
+          {platform === "vtex" && <CartButtonVTEX type="icon" />}
           {platform === "vnda" && <CartButtonVDNA />}
           {platform === "wake" && <CartButtonWake />}
           {platform === "linx" && <CartButtonLinx />}
@@ -87,7 +89,7 @@ function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
             {!buttons?.hideAccountButton && <LoginElement />}
             {!buttons?.hideCartButton && (
               <div class="flex items-center text-xs font-thin">
-                {platform === "vtex" && <CartButtonVTEX />}
+                {platform === "vtex" && <CartButtonVTEX type="completed" />}
                 {platform === "vnda" && <CartButtonVDNA />}
                 {platform === "wake" && <CartButtonWake />}
                 {platform === "linx" && <CartButtonLinx />}

diff --git a/islands/Header/Cart/vtex.tsx b/islands/Header/Cart/vtex.tsx
@@ -1,7 +1,8 @@
 import Component from "$store/components/header/Buttons/Cart/vtex.tsx";
+import type { Props } from "$store/components/header/Buttons/Cart/vtex.tsx";
 
-function Island() {
-  return <Component />;
+function Island({ type }: Props) {
+  return <Component type={type} />;
 }
 
 export default Island;