Merge branch 'Weaverse:main' into main

Weaverse · Jan 24, 2025 · ee6137d · ee6137d
2 parents 151ae26 + 6549aea
commit ee6137d
Show file tree

Hide file tree

Showing 39 changed files with 1,678 additions and 2,258 deletions.
diff --git a/app/components/Aside.tsx b/app/components/Aside.tsx
diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -4,16 +4,14 @@ import { cva } from "class-variance-authority";
 import { cn, useIsHomePath } from "~/lib/utils";
 import useWindowScroll from "react-use/lib/useWindowScroll";
 import { useEffect, useState } from "react";
-import { useDrawer } from "../Drawer";
-import clsx from "clsx";
 import { Logo } from "../Logo";
 import { MegaMenu } from "./menu/MegaMenu";
 import { SearchToggle } from "./SearchToggle";
 import { AccountLink } from "../account/AccountLink";
 import { CartDrawer } from "../cart/CartDrawer";
 import { HeaderMenuDrawer } from "./menu/DrawerMenu";
 import { useShopMenu } from "~/hooks/use-menu-shop";
-
+import { useRouteError } from "@remix-run/react";
 
 let variants = cva("", {
   variants: {
@@ -43,64 +41,65 @@ export function Header() {
   } = settings;
   const isHome = useIsHomePath();
   const { y } = useWindowScroll();
-  let [hovered, setHovered] = useState(false);
   const [top, setCalculatedTop] = useState(0);
-  let { isOpen } = useDrawer();
+  let routeError = useRouteError();
 
-  let onHover = () => setHovered(true);
-  let onLeave = () => setHovered(false);
+  let scrolled = y < 50;
 
-  let enableTransparent = settings?.enableTransparentHeader && isHome;
-  let isTransparent = enableTransparent && y < 50 && !isOpen && !hovered;
+  let enableTransparent = enableTransparentHeader && isHome && !routeError;
+  let isTransparent = enableTransparent && scrolled;
   useEffect(() => {
     let calculatedTop = stickyAnnouncementBar
       ? announcementBarHeight
       : Math.max(announcementBarHeight - y, 0);
     setCalculatedTop(calculatedTop);
   }, [y, stickyAnnouncementBar, announcementBarHeight]);
-  
+
   return (
     <>
       {enableTrialShipping && <AnnouncementBar />}
       <header
         role="banner"
         className={cn(
-          enableTransparent ? "fixed w-full" : "sticky",
-          isTransparent
-            ? "border-[var(--color-transparent-header)] bg-transparent text-[var(--color-transparent-header)]"
-            : "shadow-header border-[var(--color-header-text)] bg-[var(--color-header-bg)] text-[var(--color-header-text)]",
-          "top-0 z-40 border-b",
-          variants({ padding: headerWidth })
+          "top-0 z-40 border-b transition duration-300 ease-in-out",
+          "bg-[var(--color-header-bg)] text-[var(--color-header-text)] border-[var(--color-header-text)]",
+          "hover:bg-[var(--color-header-bg)]",
+          "hover:text-[var(--color-header-text)]",
+          "hover:border-[var(--color-header-text)]",
+          enableTransparent ? "fixed w-full group/header" : "sticky",
+          scrolled ? "shadow-header" : "shadow-none",
+          isTransparent ? 
+          [
+            "border-[var(--color-transparent-header)] bg-transparent text-[var(--color-transparent-header)]",
+            "[&_.main-logo]:opacity-0",
+            "[&_.transparent-logo]:opacity-100",
+          ] : [
+            "[&_.main-logo]:opacity-100",
+            "[&_.transparent-logo]:opacity-0",
+          ],
+          variants({ padding: headerWidth }),
         )}
         style={{ ["--announcement-bar-height" as string]: `${top}px` }}
-        onMouseEnter={onHover}
-        onMouseLeave={onLeave}
       >
         <div
           className={cn(
-            "z-40 flex h-nav items-center justify-between gap-3 transition-all duration-300",
+            "z-40 flex h-nav py-1.5 items-center justify-between gap-3",
             variants({ width: headerWidth })
           )}
         >
-          <div
-            className={clsx(
-              "absolute inset-0 z-20 bg-[var(--color-header-bg)]",
-              "transition-all duration-300 ease-in-out",
-              isTransparent ? "opacity-0" : "opacity-100"
-            )}
-          ></div>
           {typeMenuHeader === "drawer" ? (
             <HeaderMenuDrawer menu={headerMenu} />
           ) : (
-              <HeaderMenuDrawer menu={headerMenu} className="xl:hidden block" />
+            <HeaderMenuDrawer menu={headerMenu} className="xl:hidden block" />
           )}
           <Logo
             className="z-30 flex justify-start"
-            showTransparent={isTransparent}
           />
           {typeMenuHeader === "mega" && <MegaMenu menu={headerMenu} />}
           <div className="z-30 flex items-center justify-end gap-2">
-            {typeMenuHeader === "mega" && <SearchToggle isOpenDrawerHearder className="xl:block hidden" />}
+            {typeMenuHeader === "mega" && (
+              <SearchToggle isOpenDrawerHearder className="xl:block hidden" />
+            )}
             <AccountLink />
             <CartDrawer />
           </div>