From dda83e1e489cb0ec5cb0c19087f0bb3ac76397d1 Mon Sep 17 00:00:00 2001
From: haoliu716 <alan193716@gmail.com>
Date: Sun, 7 Jul 2024 09:26:03 +0300
Subject: [PATCH 1/2] fix-menu-issues: fix menu issues

---
 package.json                                  |   2 +-
 .../commerce/desktop-nav-menu-hanzo.tsx       | 159 ++++++++++--------
 packages/brand/components/header/desktop.tsx  |  12 +-
 3 files changed, 96 insertions(+), 77 deletions(-)

diff --git a/package.json b/package.json
index caad71eb..bc2f5e95 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
       "@types/react": "^18.3.2",
       "@types/react-dom": "^18.3.0",
       "supports-color": "8.1.1",
-      "@hanzo/brand": "0.1.16",
+      "@hanzo/brand": "link:./packages/brand",
       "@luxfi/data": "1.0.6",
       "@hanzo/auth": "2.4.12",
       "@hanzo/commerce": "7.1.5",
diff --git a/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx b/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx
index 57729415..d07b5170 100644
--- a/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx
+++ b/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx
@@ -17,83 +17,102 @@ import {
 import Warpcast from "../icons/warpcast";
 import type { LinkDef } from "@hanzo/ui/types";
 
-const preventDefault = (e: WheelEvent | TouchEvent) => e.preventDefault();
-const handleMouseOver = () => {
-  document.addEventListener('wheel', preventDefault, { passive: false });
-  document.addEventListener('touchmove', preventDefault, { passive: false });
-};
 
-const handleMouseOut = () => {
-  document.removeEventListener('wheel', preventDefault);
-  document.removeEventListener('touchmove', preventDefault);
-};
+const DesktopNavHanzo: React.FC<{
+  links: LinkDefExtended[],
+  className?: string,
+  isMenuOpened: boolean,
+  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>
+}> = ({ links, className = '', isMenuOpened, setIsMenuOpen }) => {
+  React.useEffect(() => {
+    const preventScroll = (e: WheelEvent | TouchEvent) => {
+      e.preventDefault();
+    };
 
+    if (isMenuOpened) {
+      window.addEventListener('wheel', preventScroll, { passive: false });
+      window.addEventListener('touchmove', preventScroll, { passive: false });
+      window.addEventListener('keydown', preventScrollKeys, { passive: false });
+    } else {
+      window.removeEventListener('wheel', preventScroll);
+      window.removeEventListener('touchmove', preventScroll);
+      window.removeEventListener('keydown', preventScrollKeys);
+    }
 
-const DesktopNavHanzo: React.FC<{ 
-  links: LinkDefExtended[], 
-  className?: string,
-  menuFlag: boolean,
-  setMenuFlag: React.Dispatch<React.SetStateAction<boolean>>
-}> = ({ links, className = '', setMenuFlag, menuFlag }) => (
-  links.length > 0 ? (
-    <NavigationMenu>
-      <NavigationMenuList>
-        {links.map((el, index) => (
-          <NavigationMenuItem key={index}>
-            {el.title === 'Docs' || el.title === 'Pricing' ? (
-              <Link href={el.href} legacyBehavior passHref >
-                <NavigationMenuLink className={cn(navigationMenuTriggerStyle(),' rounded-full')}>
-                  {el.title}
-                </NavigationMenuLink>
-              </Link>
-            ) : (
-              <>
-                <NavigationMenuTrigger className="rounded-full"
-                  onMouseOver={ () => {
-                    setMenuFlag(true)
-                    handleMouseOver()
-                  }}
-                  onMouseOut={ () => {
-                    setMenuFlag(false)
-                    handleMouseOut()
-                  } }
-                  onClick={ () => {
-                    if (menuFlag) {
-                      setMenuFlag(false)
-                      handleMouseOut()
-                    } else {
-                      setMenuFlag(true)
-                      handleMouseOver()
+    return () => {
+      window.removeEventListener('wheel', preventScroll);
+      window.removeEventListener('touchmove', preventScroll);
+      window.removeEventListener('keydown', preventScrollKeys);
+    };
+  }, [isMenuOpened]);
+
+  const preventScrollKeys = (e: KeyboardEvent) => {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const handleMouseEnter = React.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
+
+  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
+
+  return (
+    links.length > 0 ? (
+      <NavigationMenu>
+        <NavigationMenuList>
+          {links.map((el, index) => (
+            <NavigationMenuItem key={index} className="!m-0">
+              {el.title === 'Docs' || el.title === 'Pricing' ? (
+                <Link href={el.href} legacyBehavior passHref >
+                  <NavigationMenuLink className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
+                    {el.title}
+                  </NavigationMenuLink>
+                </Link>
+              ) : (
+                <>
+                  <NavigationMenuTrigger
+                    className="text-muted-1 bg-transparent"
+                    onMouseEnter={handleMouseEnter}
+                    onFocus={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    onBlur={handleMouseLeave}
+                  >
+                    {
+                      el.href && el.href !== "" ?
+                        <Link href={el.href} legacyBehavior passHref>
+                          {el.title}
+                        </Link> : <>{el.title}</>
                     }
-                  }}
-                >{el.title}</NavigationMenuTrigger>
-                <NavigationMenuContent className="fixed left-0 top-15 w-screen border-r-0 rounded-none h-full border-0 !backdrop-blur-3xl mt-0 bg-transparent"
-                  onMouseOver={ () => {
-                    setMenuFlag(true)
-                    handleMouseOver()
-                  }}
-                  onMouseOut={ () => {
-                    setMenuFlag(false)
-                    handleMouseOut()
-                  } }
-                >
-                  <div className="flex flex-row w-full justify-center border-r-0">
-                    {GroupChildMenu(el.childMenu)}
-                  </div>
-                </NavigationMenuContent>
-              </>
-            )}
-          </NavigationMenuItem>
-        ))}
-      </NavigationMenuList>
-    </NavigationMenu>
-  ) : null
-);
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent
+                    className={cn("fixed left-0 top-15 w-screen border-r-0 rounded-none h-full border-0 !backdrop-blur-3xl mt-0 bg-transparent", menuHiddenClass)}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                  >
+                    <div className="flex flex-row w-full justify-center border-r-0">
+                      {GroupChildMenu(el.childMenu)}
+                    </div>
+                  </NavigationMenuContent>
+                </>
+              )}
+            </NavigationMenuItem>
+          ))}
+        </NavigationMenuList>
+      </NavigationMenu>
+    ) : null
+  )
+};
 
 export default DesktopNavHanzo;
 
 const ListItem = React.forwardRef<
-  React.ElementRef<"a">, 
+  React.ElementRef<"a">,
   React.ComponentPropsWithoutRef<"a">
 >(({ className, title, children, key, ...props }, ref) => (
   <li key={key}>
@@ -101,7 +120,7 @@ const ListItem = React.forwardRef<
       <a
         ref={ref}
         className={cn(
-          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-500 ease-in-out",
+          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out",
           className
         )}
         {...props}
diff --git a/packages/brand/components/header/desktop.tsx b/packages/brand/components/header/desktop.tsx
index 4d458d43..5eb9b516 100644
--- a/packages/brand/components/header/desktop.tsx
+++ b/packages/brand/components/header/desktop.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 
 import { cn } from '@hanzo/ui/util'
 import { AuthWidget } from '@hanzo/auth/components'
@@ -21,14 +21,14 @@ const DesktopHeader: React.FC<{
   className = ''
 }) => {
 
-  const [menuFlag, setMenuFlag] = useState(false)
+    const [isMenuOpened, setIsMenuOpen] = React.useState(false);
+    const opendMenuClass = isMenuOpened ? " h-full" : ""
 
     // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
     // (vs be beat out by 'text-color-nav')
     return (
-      <header 
-      className={cn(`bg-transparent fixed z-header top-0 left-0 right-0 !backdrop-blur-3xl ${menuFlag ? 'h-full' : ''}`, className)} 
-        // className={'fixed z-header top-0 left-0 right-0 '}
+      <header
+        className={cn('bg-transparent fixed z-header top-0 left-0 right-0 !backdrop-blur-3xl', className, opendMenuClass)}
       >
         {/* md or larger */}
         <div className={
@@ -41,7 +41,7 @@ const DesktopHeader: React.FC<{
             {/* md or larger */}
           </div>
           <div className=' justify-center'>
-          <DesktopNavHanzo links={links} menuFlag={menuFlag} setMenuFlag={setMenuFlag} />
+            <DesktopNavHanzo links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
           </div>
           <div className='flex items-center'>
             <Link href={"https://docs.google.com/document/d/1Kk4VmVf6RyVF8Bi3lCawFV9zAr7zV8O96pRU_YfHrf4/edit?usp=sharing"} className='m-[14px] hover:font-bold ease-in duration-200'>

From f88d986f53f0cbb868c764927220c5cc39509b93 Mon Sep 17 00:00:00 2001
From: haoliu716 <alan193716@gmail.com>
Date: Sun, 7 Jul 2024 09:32:44 +0300
Subject: [PATCH 2/2] fix-menu-issues: fix build issue

---
 .../brand/components/commerce/desktop-nav-menu-hanzo.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx b/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx
index d07b5170..8c70ce97 100644
--- a/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx
+++ b/packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx
@@ -52,13 +52,13 @@ const DesktopNavHanzo: React.FC<{
     }
   };
 
-  const handleMouseEnter = React.useCallback(() => {
+  const handleMouseEnter = () => {
     setIsMenuOpen(true);
-  }, [setIsMenuOpen]);
+  };
 
-  const handleMouseLeave = React.useCallback(() => {
+  const handleMouseLeave = () => {
     setIsMenuOpen(false);
-  }, [setIsMenuOpen]);
+  };
 
   const menuHiddenClass = !isMenuOpened ? "invisible" : "";