feat: UI/UX improved

deco-sites · Aug 22, 2024 · b2609cb · b2609cb
1 parent e091b74
commit b2609cb
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 307 deletions.
diff --git a/components/header/Buttons/Cart/common.tsx b/components/header/Buttons/Cart/common.tsx
@@ -45,7 +45,7 @@ function CartButton(
           loading={loading}
           onClick={onClick}
         >
-          <Icon id="CartIcon" size={20} strokeWidth={2} class="text-red" />
+          <Icon id="CartIcon" size={24} strokeWidth={2} class="text-red" />
         </Button>
       </div>
     );

diff --git a/components/header/Header.tsx b/components/header/Header.tsx
@@ -147,7 +147,7 @@ function Header({
   return (
     <>
       <header
-        class={`${PLPIntegration ? "h-[100px]" : "h-[58px]"} xl:h-[82px]`}
+        class={`${PLPIntegration ? "h-[117px]" : "h-[75px]"} xl:h-[160px]`}
       >
         <Drawers
           menu={{ items: mobileMenuNavItems }}

diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx
@@ -171,7 +171,7 @@ function NavItem({ category }: SiteNavigationElement) {
 
       {items && items.length > 0 && (
         <div
-          class="fixed hidden group-hover:flex group-hover:flex-col bg-base-100 z-50 items-start justify-between border-t border-b-2 border-base-200 w-screen max-w-[1015px] -translate-x-1/2 left-[53%] pt-8"
+          class="fixed hidden group-hover:flex group-hover:flex-col bg-base-100 z-50 items-start justify-between border-t border-b-2 border-base-200 w-screen max-w-[920px] -translate-x-1/2 left-1/2 pt-8"
           style={{ top: "0px", marginTop: menuMarginTop }}
         >
           <div class="flex items-start justify-between gap-16 w-full px-12 pb-8">

diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
@@ -17,7 +17,7 @@ import NavItem from "./NavItem.tsx";
 import { navbarHeight } from "./constants.ts";
 import { Logo } from "$store/components/header/Header.tsx";
 import { useDevice } from "deco/hooks/useDevice.ts";
-import User from "deco-sites/maconequiio/components/user/User.tsx";
+import LoginElement from "deco-sites/maconequiio/islands/LoginElement.tsx";
 
 function Navbar({ items, searchbar, logo }: {
   items?: SiteNavigationElement[];
@@ -41,7 +41,7 @@ function Navbar({ items, searchbar, logo }: {
             {logo && (
               <a
                 href="/"
-                class="flex-grow inline-flex items-center justify-start"
+                class="flex-grow inline-flex items-center justify-center"
                 style={{ minHeight: navbarHeight }}
                 aria-label="Store logo"
               >
@@ -69,41 +69,50 @@ function Navbar({ items, searchbar, logo }: {
 
       {/* Desktop Version */}
       {isDesktop && (
-        <div class="hidden xl:flex items-center justify-between gap-1.5 w-full container py-0.5 px-4">
-          <div class="flex items-center gap-4 justify-start">
-            {logo && (
-              <a
-                href="/"
-                aria-label="Store logo"
-                class="block"
-              >
-                <Image
-                  src={logo.src}
-                  alt={logo.alt}
-                  width={logo.width || 100}
-                  height={logo.height || 13}
-                />
-              </a>
-            )}
-          </div>
+        <div class="hidden xl:flex flex-col items-center justify-center w-full border-b border-base-200 pt-4 mx-auto">
+          <div class="grid grid-cols-3 items-center w-full h-[66px] xl:max-w-[1305px] mx-auto px-6">
+            <div class="flex items-center gap-4 justify-start">
+              {logo && (
+                <a
+                  href="/"
+                  aria-label="Store logo"
+                  class="block"
+                >
+                  <Image
+                    src={logo.src}
+                    alt={logo.alt}
+                    width={logo.width || 100}
+                    height={logo.height || 13}
+                  />
+                </a>
+              )}
+            </div>
 
-          <ul class="flex-auto flex items-center justify-center h-full">
-            {items?.map((item) => <NavItem category={item.category} />)}
-          </ul>
+            <div class="w-full max-w-[640px]">
+              <Searchbar searchbar={searchbar} />
+            </div>
 
-          <div class="flex items-center justify-end gap-2">
-            <SearchButton />
-            <Searchbar searchbar={searchbar} />
-            <User />
-            <div class="flex items-center text-xs font-thin">
-              {platform === "vtex" && <CartButtonVTEX type="icon" />}
-              {platform === "vnda" && <CartButtonVDNA />}
-              {platform === "wake" && <CartButtonWake />}
-              {platform === "linx" && <CartButtonLinx />}
-              {platform === "shopify" && <CartButtonShopify />}
-              {platform === "nuvemshop" && <CartButtonNuvemshop />}
+            <div class="flex-none flex items-center justify-end gap-6 col-span-1">
+              <LoginElement />
+              <div class="flex items-center text-xs font-thin">
+                {platform === "vtex" && <CartButtonVTEX type="completed" />}
+                {platform === "vnda" && <CartButtonVDNA />}
+                {platform === "wake" && <CartButtonWake />}
+                {platform === "linx" && <CartButtonLinx />}
+                {platform === "shopify" && <CartButtonShopify />}
+                {platform === "nuvemshop" && <CartButtonNuvemshop />}
+              </div>
             </div>
           </div>
+
+          <div
+            id="nav"
+            class="flex items-center justify-center w-full h-full drop-shadow-md border-t border-t-base-200/50 bg-white-ice"
+          >
+            <ul class="flex items-center justify-center w-full h-full gap-6 col-span-1">
+              {items?.map((item) => <NavItem category={item.category} />)}
+            </ul>
+          </div>
         </div>
       )}
     </>

diff --git a/components/header/Searchbar.tsx b/components/header/Searchbar.tsx
@@ -1,24 +1,34 @@
 import Searchbar, {
   Props as SearchbarProps,
 } from "$store/components/search/Searchbar.tsx";
+import DesktopSearchbar from "$store/components/search/DesktopSearchbar.tsx";
 import { useUI } from "$store/sdk/useUI.ts";
 
 export interface Props {
   searchbar?: SearchbarProps;
+  type?: "mobile" | "desktop";
 }
 
-function SearchbarModal({ searchbar }: Props) {
+function SearchbarModal({ searchbar, type = "desktop" }: Props) {
   const { displaySearchPopup } = useUI();
 
-  if (!searchbar || !displaySearchPopup.value) {
+  if (!searchbar) {
     return null;
   }
 
-  return (
-    <div class="block border-y border-base-200 shadow absolute left-0 top-[100%] w-screen z-50 bg-base-100">
-      <Searchbar {...searchbar} />
-    </div>
-  );
+  if (type === "mobile") {
+    return (
+      <>
+        {displaySearchPopup.value && (
+          <div class="fixed bg-base-100 container h-auto z-[99999]">
+            <Searchbar {...searchbar} />
+          </div>
+        )}
+      </>
+    );
+  }
+
+  return <DesktopSearchbar {...searchbar} />;
 }
 
 export default SearchbarModal;
diff --git a/components/header/constants.ts b/components/header/constants.ts
@@ -1,2 +1,2 @@
-export const navbarHeight = "58px";
-export const menuMarginTop = "75px";
+export const navbarHeight = "75px";
+export const menuMarginTop = "40px";
diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
@@ -72,7 +72,7 @@ function ProductShelf({
       style={{ backgroundColor: background }}
       class="flex items-center justify-center w-full h-full py-8 lg:py-10"
     >
-      <div class="w-full container max-w-[95%] lg:max-w-[1350px] flex flex-col gap-10">
+      <div class="w-full md:container md:max-w-[95%] lg:max-w-[1350px] flex flex-col gap-10">
         <Header
           title={title || ""}
           description={description || ""}
@@ -84,7 +84,7 @@ function ProductShelf({
           class={clx(
             "grid",
             layout?.showArrows && "grid-cols-[48px_1fr_48px]",
-            "px-4 container",
+            "px-4 md:container",
           )}
         >
           <Slider class="carousel carousel-center gap-1 lg:gap-4 row-start-2 row-end-5">