[LX] Improve menus on mobile

[lin-d-hop]

Description

In #231 the following issues with menus were uncovered:

• Difficulty swiping upwards to menu items - works intermittently (Land Data, mobile)
• Tool tip remains open when slide out opens / same with all tooltips if you open and close using the buttons on the nav (Land Data, mobile)
• Slide out and user menu can be opened simultaneously - opening one should trigger close of one on mobile (tablet / mobile)
• Can be difficult to close user menu (avatar top right), due to overlap of the active area of the search (mobile)
• When logged out, if burger menu is tapped (top right) the menu remains if you tap outside of the menu, and if you navigate to registration or reset password pages (tablet / mobile)

Let's fix them :)

Acceptance Criteria

• Investigate intermittant menu upward swipe. Timebox to 2hrs - if you haven't figured it out in 2hrs then let's continue to live with it for now. Share your findings on the issue so that if we come back to it we are starting from a better place :)
• Improve tooltip UX when using other nav buttons
• Limit to one options at a time for slide out and user menu
• Improve UX on close user menu
• Improve UX on logout of menu

[ms0ur1s]

• Investigate intermittant menu upward swipe. Timebox to 2hrs - if you haven't figured it out in 2hrs then let's continue to live with it for now. Share your findings on the issue so that if we come back to it we are starting from a better place :)

Menu swipe now works fine on staging. In a comparison between live and staging on both tablet and mobile, the problem persists on live (though less so on tablet), but not on staging. Either this was already fixed on staging (an oversight on my part, any further site audits I undertake will include an inspection of both staging and live) or was corrected subsequent to my previous sweep.

However, I did notice the below on tablet. I seem to remember discovering this previously but I missed it from my write-up.

I can only replicate this on an actual device, however, not it chrome dev tools or using the mobile simulator browser extension.

[ms0ur1s]

• Slide out and user menu can be opened simultaneously - opening one should trigger close of one on mobile (tablet / mobile)

Conditional closes added to ProfilePic.js

onClick={() => {
        analytics.event(analytics._event.USER_MENU, "Open");
        dispatch({ type: "TOGGLE_MENU_PROFILE" });
        // Close left pane if mobile and tool is active
        if (activeTool != "" && isMobile) dispatch({ type: "CLOSE_TRAY" });
}}

and LeftPane.js

const clickIcon = (tray) => {
    active === tray
      ? dispatch({ type: "CLOSE_TRAY" })
      : dispatch({ type: "SET_ACTIVE", payload: tray });
    // Close profile menu if open and mobile
    if (profileMenuOpen && isMobile) dispatch({ type: "CLOSE_MENU_PROFILE" });
};

[ms0ur1s]

• Tool tip remains open when slide out opens / same with all tooltips if you open and close using the buttons on the nav (Land Data, mobile)

Resolved using globalEventOff as in below issue: https://github.com/ReactTooltip/react-tooltip/issues/203

[ms0ur1s]

• When logged out, if burger menu is tapped (top right) the menu remains if you tap outside of the menu, and if you navigate to registration or reset password pages (tablet / mobile)

Added a click outside custom hook

[ms0ur1s]

• Can be difficult to close user menu (avatar top right), due to overlap of the active area of the search (mobile)

As with the first issue this seem to have been resolved on staging.