Merge pull request Weaverse#161 from Weaverse/dev

Dev

app/hooks/useAsyncCart.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+import { useRootLoaderData } from "~/root";
+import { type CartReturn } from "@shopify/hydrogen";
+
+export function useAsyncCart() {
+  let [cart, setCart] = useState<CartReturn>();
+  let root = useRootLoaderData();
+  useEffect(() => {
+    if (typeof root?.cart?.then === "function") {
+      root.cart.then((cart: any) => {
+        setCart(cart);
+      });
+    }
+  }, [root]);
+  return cart;
+}

app/modules/Drawer.tsx

@@ -59,11 +59,11 @@ export function Drawer({
         <div className="fixed inset-0 top-nav">
           <div className="absolute inset-0 top-nav overflow-hidden">
             <div
-              className={`fixed inset-y-0 flex max-w-full ${
+              className={`fixed inset-y-0 flex ${
                 openFrom === "right"
-                  ? "right-0"
+                  ? "right-0 max-w-full"
                   : openFrom === "top"
-                    ? "top-nav"
+                    ? "top-nav overflow-hidden w-screen"
                     : ""
               }`}
             >

app/modules/DrawerFilter.tsx

@@ -338,7 +338,7 @@ export default function SortMenu({
       </Menu.Button>
       <Menu.Items
         as="nav"
-        className="absolute right-0 top-14 flex h-fit w-56 flex-col gap-2 rounded border bg-background p-5"
+        className="absolute right-0 top-14 flex h-fit w-56 flex-col gap-2 rounded border bg-primary p-5"
       >
         {items.map((item) => (
           <Menu.Item key={item.label}>

app/modules/Logo.tsx

@@ -2,6 +2,7 @@ import { useThemeSettings } from "@weaverse/hydrogen";
 import { Image } from "@shopify/hydrogen";
 
 import { Link } from "./Link";
+import clsx from "clsx";
 
 export function Logo({ showTransparent }: { showTransparent?: boolean }) {
   let settings = useThemeSettings();
@@ -17,11 +18,24 @@ export function Logo({ showTransparent }: { showTransparent?: boolean }) {
       to="/"
       prefetch="intent"
     >
-      <div className="max-w-[120px]">
+      <div className="max-w-[120px] relative">
         <Image
-          data={showTransparent ? transparentLogoData : logoData}
+          data={logoData}
           sizes="auto"
-          className={"w-full h-full object-cover"}
+          className={clsx(
+            "w-full h-full object-cover transition-opacity duration-300 ease-in",
+            showTransparent ? "opacity-0" : "opacity-100",
+          )}
+        />
+        <Image
+          data={transparentLogoData} 
+          sizes="auto"
+          className={
+            clsx(
+              "absolute top-0 left-0 w-full h-full object-cover transition-opacity duration-300 ease-in",
+              showTransparent ? "opacity-100" : "opacity-0",
+            )
+          }
         />
       </div>
     </Link>

app/modules/header/DesktopHeader.tsx

@@ -24,45 +24,45 @@ export function DesktopHeader({
   title: string;
 }) {
   const { y } = useWindowScroll();
+  // get theme settings
   let settings = useThemeSettings();
   let [hovered, setHovered] = useState(false);
   let { isOpen, openDrawer, closeDrawer } = useDrawer();
 
-  let onHover = () => setHovered(true);
+  let onHover = () => !hovered && setHovered(true);
   let onLeave = () => setHovered(false);
+  let handleCloseDrawer = () => {
+    closeDrawer();
+    setTimeout(() => {
+      onLeave();
+    }, 200);
+  };
 
-  let enableTransparent = settings?.enableTransparentHeader;
+  let enableTransparent = settings?.enableTransparentHeader && isHome;
   let isTransparent = enableTransparent && y < 50 && !isOpen && !hovered;
   return (
     <header
       role="banner"
       className={clsx(
-        enableTransparent ? "fixed" : "sticky",
+        enableTransparent ? "fixed w-screen" : "sticky",
         isTransparent
-          ? "backdrop-blur-lg text-primary"
-          : "shadow-header text-body",
-        "hidden h-nav lg:flex items-center duration-300 transition-all z-40 top-0 justify-between leading-none gap-8 origin-top ease-in-out",
-        "w-full px-6 md:px-8 lg:px-12",
+          ? "text-primary bg-transparent"
+          : "shadow-header text-body bg-primary",
+        " transition-all duration-300 ease-in",
+        "h-nav lg:flex items-center z-40 top-0 justify-between leading-none gap-8",
+        "px-6 md:px-8 lg:px-12",
       )}
-      onMouseEnter={onHover}
+      onMouseOver={onHover}
+      onMouseMove={onHover}
       onMouseLeave={onLeave}
     >
-      <div
-        className={clsx(
-          "absolute inset-0 bg-primary z-20",
-          "transition-all duration-300 ease-in-out",
-          isTransparent
-            ? "opacity-0 -translate-y-1/2"
-            : "opacity-100 translate-y-0",
-        )}
-      ></div>
       <Logo showTransparent={isTransparent} />
       {menu && <DesktopMenu menu={menu} />}
       <div className="flex items-center gap-1 z-30">
         <SearchToggle
           isOpen={isOpen}
           openDrawer={openDrawer}
-          closeDrawer={closeDrawer}
+          closeDrawer={handleCloseDrawer}
         />
         <AccountLink className="relative flex items-center justify-center w-8 h-8 focus:ring-primary/5" />
         <CartCount isHome={isHome} openCart={openCart} />

app/modules/header/menu/DesktopMenu.tsx

@@ -153,7 +153,7 @@ function ImageMenu({ title, items, to }: SingleMenuItem) {
                 <div className="aspect-square relative group/item overflow-hidden">
                   <Image
                     data={item?.resource?.image}
-                    className="w-full h-full object-contain group-hover/item:scale-110 transition-transform duration-300"
+                    className="w-full h-full object-cover group-hover/item:scale-110 transition-transform duration-300"
                     sizes="auto"
                   />
                   <div className="absolute w-full inset-0 text-center text-white font-medium pointer-events-none p-2 bg-black/15 group-hover/item:bg-black/30 flex items-center justify-center">

app/sections/slideshow/index.tsx

@@ -40,6 +40,7 @@ export interface SlideshowProps
   loop: boolean;
   autoRotate: boolean;
   changeSlidesEvery: number;
+  "data-wv-id": string;
 }
 
 let Slideshow = forwardRef<HTMLDivElement, SlideshowProps>((props, ref) => {
@@ -62,7 +63,13 @@ let Slideshow = forwardRef<HTMLDivElement, SlideshowProps>((props, ref) => {
   } = props;
 
   return (
-    <section ref={ref} {...rest} className={variants({ height })}>
+    <section
+      // this is a hack to force the component to re-render when the props change
+      key={`Swiper-${rest["data-wv-id"]}-${loop}-${autoRotate}-${changeSlidesEvery}`}
+      ref={ref}
+      {...rest}
+      className={variants({ height })}
+    >
       <Swiper
         effect="fade"
         loop={loop}
@@ -129,12 +136,6 @@ export let schema: HydrogenComponentSchema = {
           },
           defaultValue: "large",
         },
-        {
-          type: "switch",
-          label: "Loop",
-          name: "loop",
-          defaultValue: true,
-        },
         {
           type: "switch",
           label: "Auto-rotate slides",
@@ -155,6 +156,12 @@ export let schema: HydrogenComponentSchema = {
           condition: "autoRotate.eq.true",
           helpText: "Auto-rotate is disabled inside Weaverse Studio.",
         },
+        {
+          type: "switch",
+          label: "Loop",
+          name: "loop",
+          defaultValue: true,
+        },
       ],
     },
     {

app/styles/app.css

@@ -213,7 +213,7 @@
   background-repeat: no-repeat;
   display: inline;
   padding-bottom: 3px;
-  transition: all 0.3s ease;
+  transition: background 0.2s ease-in;
   background-position: left calc(1em + 4px);
 }
 .text-animation:hover {
@@ -226,14 +226,22 @@
   background-size: 100% 1px;
 }
 .dropdown-transition {
-  @apply opacity-0 -translate-y-full transform-gpu;
+  @apply transform-gpu;
+  z-index: 0;
+  visibility: hidden;
+  opacity: 0;
+  max-height: 0;
   transition:
-    opacity 0.2s ease-in-out,
-    transform 0.3s ease-in-out;
+    opacity 0.3s ease-in,
+    visibility 0.3s ease-in,
+    max-height 375ms ease-in;
 }
 
 .group:hover .dropdown-transition {
-  @apply opacity-100 translate-y-0;
+  opacity: 1;
+  max-height: 400px;
+  z-index: 30;
+  visibility: visible;
 }
 
 .fly-in {