diff --git a/client/components/Nav/NavDropdownMenu.jsx b/client/components/Nav/NavDropdownMenu.jsx index 7fb8eda34f..ee3e5082aa 100644 --- a/client/components/Nav/NavDropdownMenu.jsx +++ b/client/components/Nav/NavDropdownMenu.jsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React, { useContext, useMemo } from 'react'; +import { useFloating, autoUpdate, shift } from '@floating-ui/react'; import TriangleIcon from '../../images/down-filled-triangle.svg'; import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts'; @@ -19,11 +20,31 @@ export function useMenuProps(id) { return { isOpen, handlers }; } +const isSafari = () => + /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + function NavDropdownMenu({ id, title, children }) { const { isOpen, handlers } = useMenuProps(id); + const middleware = isSafari() + ? [ + shift({ + mainAxis: false + }) + ] + : [shift()]; + + const { refs, floatingStyles } = useFloating({ + whileElementsMounted: autoUpdate, + placement: 'bottom-start', + middleware + }); + return ( -
  • +
  • -