fix(menu): adapt triggerFix to work with small screens with hover

serlo · Jan 30, 2024 · cbd5d27 · cbd5d27
1 parent 9b9f6ba
commit cbd5d27
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/apps/web/src/components/navigation/header/menu/sub-content.tsx b/apps/web/src/components/navigation/header/menu/sub-content.tsx
@@ -28,6 +28,7 @@ export function SubContent({ subItems, parent }: SubContentProps) {
         (isLast || isParticipate) && 'md:right-0'
       )}
       onPointerEnter={preventHover}
+      onPointerLeave={preventHover}
     >
       {isParticipateMega ? (
         <SubParticipateMega subItems={subItems} parent={parent} />

diff --git a/apps/web/src/components/navigation/header/menu/use-nav-menu-trigger-fix.ts b/apps/web/src/components/navigation/header/menu/use-nav-menu-trigger-fix.ts
@@ -16,23 +16,19 @@ export function useNavMenuTriggerFix() {
       // make sure click directly after hover closes menu again
       onClick: preventMouseClick,
       onPointerEnter: () => {
-        if (hasTouchSupportAndSmallScreen()) return
+        if (isSmallScreen()) return
         if (clickDisabled) clearTimeout(clickDisabled)
         clickDisabled = setTimeout(() => (clickDisabled = false), 1000)
       },
       // disable hover completely on small screens with touch support
+      onPointerLeave: preventHover,
       onPointerMove: preventHover,
     }
   }, [])
 }
 
-function hasTouchSupportAndSmallScreen() {
-  return (
-    ('ontouchstart' in window || navigator.maxTouchPoints > 0) &&
-    window.innerWidth < 1024
-  )
-}
+const isSmallScreen = () => window.innerWidth < 1024
 
 export const preventHover: PointerEventHandler = (event) => {
-  if (hasTouchSupportAndSmallScreen()) event.preventDefault()
+  if (isSmallScreen()) event.preventDefault()
 }