Merge pull request #151 from deco-sites/feat/split-header

feat: split mobile/desktop
deco-sites · Mar 1, 2024 · 0f207b8 · 0f207b8 · deno-deploy · Mar 1, 2024
2 parents 27bf368 + 6bb7628
commit 0f207b8
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 87 deletions.
diff --git a/components/header/Header.tsx b/components/header/Header.tsx
@@ -1,8 +1,10 @@
+import { AppContext } from "$store/apps/site.ts";
 import type { Props as SearchbarProps } from "$store/components/search/Searchbar.tsx";
 import Drawers from "$store/islands/Header/Drawers.tsx";
 import { usePlatform } from "$store/sdk/usePlatform.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 import type { SiteNavigationElement } from "apps/commerce/types.ts";
+import type { SectionProps } from "deco/types.ts";
 import Alert from "./Alert.tsx";
 import Navbar from "./Navbar.tsx";
 import { headerHeight } from "./constants.ts";
@@ -74,7 +76,8 @@ function Header({
   },
   logoPosition = "center",
   buttons,
-}: Props) {
+  device,
+}: SectionProps<typeof loader>) {
   const platform = usePlatform();
   const items = navItems ?? [];
 
@@ -89,6 +92,7 @@ function Header({
           <div class="bg-base-100 fixed w-full z-50">
             {alerts && alerts.length > 0 && <Alert alerts={alerts} />}
             <Navbar
+              device={device}
               items={items}
               searchbar={searchbar && { ...searchbar, platform }}
               logo={logo}
@@ -102,4 +106,8 @@ function Header({
   );
 }
 
+export const loader = (props: Props, _req: Request, ctx: AppContext) => {
+  return { ...props, device: ctx.device };
+};
+
 export default Header;
diff --git a/components/header/Navbar.tsx b/components/header/Navbar.tsx
@@ -15,18 +15,22 @@ import NavItem from "./NavItem.tsx";
 import { navbarHeight } from "./constants.ts";
 import { Buttons, Logo } from "$store/components/header/Header.tsx";
 
-function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
-  items: SiteNavigationElement[];
-  searchbar?: SearchbarProps;
-  logo?: Logo;
-  buttons?: Buttons;
-  logoPosition?: "left" | "center";
-}) {
+// Make it sure to render it on the server only. DO NOT render it on an island
+function Navbar(
+  { items, searchbar, logo, buttons, logoPosition = "left", device }: {
+    items: SiteNavigationElement[];
+    searchbar?: SearchbarProps;
+    logo?: Logo;
+    buttons?: Buttons;
+    logoPosition?: "left" | "center";
+    device: "mobile" | "desktop" | "tablet";
+  },
+) {
   const platform = usePlatform();
 
-  return (
-    <>
-      {/* Mobile Version */}
+  // Mobile header
+  if (device === "mobile") {
+    return (
       <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"
@@ -58,86 +62,86 @@ function Navbar({ items, searchbar, logo, buttons, logoPosition = "left" }: {
           {platform === "nuvemshop" && <CartButtonNuvemshop />}
         </div>
       </div>
+    );
+  }
 
-      {/* Desktop Version */}
-      <div class="hidden lg:grid lg:grid-cols-3 items-center border-b border-base-200 w-full px-6">
-        <ul
-          class={`flex gap-6 col-span-1 ${
-            logoPosition === "left" ? "justify-center" : "justify-start"
-          }`}
-        >
-          {items.map((item) => <NavItem item={item} />)}
-        </ul>
-        <div
-          class={`flex ${
-            logoPosition === "left"
-              ? "justify-start -order-1"
-              : "justify-center"
-          }`}
-        >
-          {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="flex-none flex items-center justify-end gap-6 col-span-1">
-          {!buttons?.hideSearchButton && (
-            <div class="flex items-center text-xs font-thin gap-1">
-              <SearchButton />SEARCH
-            </div>
-          )}
+  // Desktop header
+  return (
+    <div class="hidden sm:grid sm:grid-cols-3 items-center border-b border-base-200 w-full px-6">
+      <ul
+        class={`flex gap-6 col-span-1 ${
+          logoPosition === "left" ? "justify-center" : "justify-start"
+        }`}
+      >
+        {items.map((item) => <NavItem item={item} />)}
+      </ul>
+      <div
+        class={`flex ${
+          logoPosition === "left" ? "justify-start -order-1" : "justify-center"
+        }`}
+      >
+        {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="flex-none flex items-center justify-end gap-6 col-span-1">
+        {!buttons?.hideSearchButton && (
+          <div class="flex items-center text-xs font-thin gap-1">
+            <SearchButton />SEARCH
+          </div>
+        )}
 
-          <Searchbar searchbar={searchbar} />
-          {!buttons?.hideAccountButton && (
-            <a
-              class="flex items-center text-xs font-thin"
-              href="/account"
-              aria-label="Account"
-            >
-              <div class="flex btn btn-circle btn-sm btn-ghost gap-1">
-                <Icon id="User" size={20} strokeWidth={0.4} />
-              </div>
-              ACCOUNT
-            </a>
-          )}
-          {!buttons?.hideWishlistButton && (
-            <a
-              class="flex items-center text-xs font-thin"
-              href="/wishlist"
+        <Searchbar searchbar={searchbar} />
+        {!buttons?.hideAccountButton && (
+          <a
+            class="flex items-center text-xs font-thin"
+            href="/account"
+            aria-label="Account"
+          >
+            <div class="flex btn btn-circle btn-sm btn-ghost gap-1">
+              <Icon id="User" size={20} strokeWidth={0.4} />
+            </div>
+            ACCOUNT
+          </a>
+        )}
+        {!buttons?.hideWishlistButton && (
+          <a
+            class="flex items-center text-xs font-thin"
+            href="/wishlist"
+            aria-label="Wishlist"
+          >
+            <button
+              class="flex btn btn-circle btn-sm btn-ghost gap-1"
               aria-label="Wishlist"
             >
-              <button
-                class="flex btn btn-circle btn-sm btn-ghost gap-1"
-                aria-label="Wishlist"
-              >
-                <Icon id="Heart" size={24} strokeWidth={0.4} />
-              </button>
-              WISHLIST
-            </a>
-          )}
-          {!buttons?.hideCartButton && (
-            <div class="flex items-center text-xs font-thin">
-              {platform === "vtex" && <CartButtonVTEX />}
-              {platform === "vnda" && <CartButtonVDNA />}
-              {platform === "wake" && <CartButtonWake />}
-              {platform === "linx" && <CartButtonLinx />}
-              {platform === "shopify" && <CartButtonShopify />}
-              {platform === "nuvemshop" && <CartButtonNuvemshop />}
-            </div>
-          )}
-        </div>
+              <Icon id="Heart" size={24} strokeWidth={0.4} />
+            </button>
+            WISHLIST
+          </a>
+        )}
+        {!buttons?.hideCartButton && (
+          <div class="flex items-center text-xs font-thin">
+            {platform === "vtex" && <CartButtonVTEX />}
+            {platform === "vnda" && <CartButtonVDNA />}
+            {platform === "wake" && <CartButtonWake />}
+            {platform === "linx" && <CartButtonLinx />}
+            {platform === "shopify" && <CartButtonShopify />}
+            {platform === "nuvemshop" && <CartButtonNuvemshop />}
+          </div>
+        )}
       </div>
-    </>
+    </div>
   );
 }
 

diff --git a/sections/Header/Header.tsx b/sections/Header/Header.tsx
@@ -1 +1 @@
-export { default } from "$store/components/header/Header.tsx";
+export { default, loader } from "$store/components/header/Header.tsx";