Skip to content

Commit

Permalink
Merge pull request #69 from hanzoai/fix-menu-issues
Browse files Browse the repository at this point in the history 
fix-menu-issues: fix menu issues
  • Loading branch information
@zoosos
zoosos committed Jul 7, 2024
2 parents d47445d + f88d986 commit b8c6605
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 77 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
159 changes: 89 additions & 70 deletions packages/brand/components/commerce/desktop-nav-menu-hanzo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,91 +17,110 @@ 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 = () => {
setIsMenuOpen(true);
};

const handleMouseLeave = () => {
setIsMenuOpen(false);
};

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}>
<NavigationMenuLink asChild>
<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}
Expand Down
12 changes: 6 additions & 6 deletions packages/brand/components/header/desktop.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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={
Expand All @@ -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'>
Expand Down

1 comment on commit b8c6605

@vercel
Copy link

@vercel vercel bot commented on b8c6605 Jul 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

hanzo-ai – ./sites/landing

hanzo.ai
hanzo-ai.vercel.app
hanzo-ai-git-main-hanzo-ai.vercel.app
hanzo-ai-hanzo-ai.vercel.app
www.hanzo.ai

Please sign in to comment.