diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx index 132ea55..df278e3 100644 --- a/src/components/NavigationMenu.tsx +++ b/src/components/NavigationMenu.tsx @@ -1,4 +1,4 @@ -import { forwardRef, Ref, useEffect, useRef, useState } from 'react'; +import { forwardRef, Ref } from 'react'; import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components'; import { NavLink, matchPath, useLocation } from 'react-router-dom'; @@ -21,8 +21,6 @@ import { import { layoutMixins } from '@/styles/layoutMixins'; -import { isTruthy } from '@/lib/isTruthy'; - import { Tag } from './Tag'; import { Icon, IconName } from './Icon'; @@ -61,7 +59,6 @@ const NavItem = forwardRef( <> {slotBefore} - {/* {`${label}${subitems?.length ? ' ' : ''}`} */} {label} {tag && ( <> @@ -100,8 +97,6 @@ const NavItem = forwardRef( } ); -type TriggerRef = HTMLAnchorElement | HTMLDivElement | HTMLButtonElement | null; - export const NavigationMenu = ({ onSelectItem, onSelectGroup, @@ -112,33 +107,6 @@ export const NavigationMenu = & StyleProps) => { - // Disable click (close) in the first 500ms after hover (open) - // https://github.com/radix-ui/primitives/issues/1630#issuecomment-1545995075 - const [clickIsDisabled, setClickIsDisabled] = useState(false); - const triggerRefs = useRef({} as { [value: string]: TriggerRef }); - - useEffect(() => { - const observer = new MutationObserver((mutationsList) => { - for (const mutation of mutationsList) { - if ( - mutation.type === 'attributes' && - mutation.attributeName === 'data-state' && - (mutation.target as unknown as HTMLOrSVGElement).dataset.state === 'open' && - mutation.target !== document.activeElement - ) { - setClickIsDisabled(true); - setTimeout(() => setClickIsDisabled(false), 500); - } - } - }); - - for (const element of Object.values(triggerRefs.current).filter(isTruthy)) { - observer.observe(element, { attributes: true }); - } - - return () => observer.disconnect(); - }, []); - const renderSubitems = ({ item, depth = 0, @@ -148,18 +116,18 @@ export const NavigationMenu = ( <> 0} - ref={(ref: TriggerRef) => (triggerRefs.current[item.value] = ref)} - onClick={(e: MouseEvent) => { - if (clickIsDisabled) { - e.preventDefault(); - } - }} + asChild + onPointerMove={(e: MouseEvent) => e.preventDefault()} + onPointerLeave={(e: MouseEvent) => e.preventDefault()} > - + e.preventDefault()} + onPointerLeave={(e: MouseEvent) => e.preventDefault()} + data-placement={submenuPlacement} + > 0 ? 'menu' : orientation === 'vertical' ? 'vertical' : 'menu'} @@ -410,25 +378,12 @@ Styled.List = styled(List)` `; Styled.ListItem = styled(Item)` - /* display: contents; */ display: grid; position: relative; ${Styled.List}[data-orientation="horizontal"] > & { gap: var(--submenu-side-offset); } - - /* ${Styled.List}[data-orientation="menu"] > & { - grid-template-columns: 1fr 0; - align-items: start; - gap: 2rem; - } */ - - /* &:has([data-state="open"]) { - position: sticky; - left: 0; - right: 0; - } */ `; Styled.SubMenuTrigger = styled(Trigger)` @@ -436,11 +391,6 @@ Styled.SubMenuTrigger = styled(Trigger)` outline-offset: -2px; &[data-state='open'] { - div { - background-color: var(--navigationMenu-item-checked-backgroundColor); - color: var(--navigationMenu-item-checked-textColor); - } - svg { rotate: 0.5turn; } @@ -452,11 +402,10 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>` subitems?.length ? css` ${popoverMixins.trigger} - --trigger-backgroundColor: transparent; - --trigger-open-backgroundColor: var(--color-layer-3); + --trigger-open-backgroundColor: var(--navigationMenu-item-checked-backgroundColor); ` : css` - &:hover:not(.active) { + &:hover:not(:active) { background-color: var(--navigationMenu-item-highlighted-backgroundColor); color: var(--navigationMenu-item-highlighted-textColor); } @@ -470,8 +419,6 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>` --item-radius: var(--navigationMenu-item-radius); --item-padding: var(--navigationMenu-item-padding); - /* ${popoverMixins.backdropOverlay} */ - ${layoutMixins.scrollSnapItem} min-height: var(--navigationMenu-item-height);