Problem/Motivation
Currently we have adapted "safe triangles" in the first level of the hover menu to allow some flexibility for mouse users when moving over to the second level.
Background on the basic idea of "safe triangles"
Our "safe triangles" triangle looks like this, where the user here is hovering over the Structure first level menu:
The triangle is formed by connecting the following three points:
- Point 1: Where the users mouse is
- Point 2: Top left corner of popover
- Point 3: Left side of popover, 66% of viewport height down from the top of popover
There are two main issues with the current safe triangle. First, while it works for the core menu items out of the box on an install profile like Standard or Umami, it doesn't work well for full sub menus. While it works to track to the top most item, it doesn not when the user needs to track to the bottom most menu item for instance:
https://www.drupal.org/files/issues/2024-07-19/tracking_to_bottom_of_lar... →
The second problem is with the safe triangle in the user menu. It's cut off by a z-index issue, and so does not work well to track to the top most menu item of the submenu:
Steps to reproduce
- Install the navigation module
- Add a number of menu items under the Configuration menu to make the issue obvious
- Hover over a first level menu item with children
- Move your mouse to the submenu, moving to the bottom most menu item of the sub menu
- For the second issue wiith the user menu, hover over the user menu and move your mouse towards the top most menu item of the sub menu
Proposed resolution
We probably need to add some calculation of submenu size to make the safe triangle more dynamic per the content of the submenu. At the moment, within toolbar-popover.pcss.css the "Point 3" for the safe triangle is defined statically:
/* TODO: Replace with calculated value of popover content height. */
--safe-triangle-submenu-end-y: 66vh;
Help tip for debugging:
Add the following CSS to make visualizing the safe triangle easy:
[data-toolbar-popover-safe-triangle] {
background-color: green;
opacity: 0.7;
}
Remaining tasks
Fix the two issues noted with safe triangle.
User interface changes
Increased UX for opening links in submenus for mouse users.
API changes
None.
Data model changes
None.
Release notes snippet