refactor: detect touch screens for header navigation handling

Author: r41ph

web-components/src/components/header/components/HeaderMenuItem/HeaderMenuItem.Hover.tsx

@@ -1,11 +1,5 @@
 import React, { useRef } from 'react';
-import {
-  MenuList,
-  Paper,
-  Popover,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
+import { MenuList, Paper, Popover, useMediaQuery } from '@mui/material';
 import cx from 'clsx';
 
 import DropdownIcon from '../../../icons/DropdownIcon';
@@ -38,8 +32,8 @@ const HeaderMenuItemHover = ({
   children,
 }: Props): JSX.Element => {
   const { classes: styles } = useMenuHoverStyles();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  // eslint-disable-next-line lingui/no-unlocalized-strings
+  const isTouchScreen = useMediaQuery('(pointer: coarse)');
   const popoverAnchor = useRef(null);
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
 
@@ -63,9 +57,9 @@ const HeaderMenuItemHover = ({
         ref={popoverAnchor}
         aria-owns={open ? 'mouse-over-popover' : undefined}
         aria-haspopup="true"
-        onMouseEnter={isMobile ? undefined : handlePopoverOpen}
+        onMouseEnter={isTouchScreen ? undefined : handlePopoverOpen}
         onMouseLeave={handlePopoverClose}
-        onClick={isMobile ? handlePopoverToggle : undefined}
+        onClick={isTouchScreen ? handlePopoverToggle : undefined}
       >
         {title && (
           <span className={classes?.title}>

web-components/src/components/mobile-menu/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useTheme } from '@mui/material';
+import { useMediaQuery, useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import MenuItem from '@mui/material/MenuItem';
@@ -34,6 +34,8 @@ const MobileMenu: React.FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const { classes: styles, cx } = useMobileMenuStyles();
   const theme = useTheme();
+  // eslint-disable-next-line lingui/no-unlocalized-strings
+  const isTouchScreen = useMediaQuery('(pointer: coarse)');
   const [open, setOpen] = useState(false);
 
   const handleToggle = () => {
@@ -53,7 +55,7 @@ const MobileMenu: React.FC<React.PropsWithChildren<Props>> = ({
         <HamburgerIcon
           className={cx(styles.hamburger, styles.icon)}
           onClick={handleToggle}
-          onMouseLeave={handleClose}
+          onMouseLeave={isTouchScreen ? handleClose : undefined}
           width="29px"
           height="22px"
           sx={{ ml: { xs: isUserLoggedIn ? 0 : 2, sm: 4 } }}