Enhancement: update menu to use project baseline #505
Description
Is your feature request related to a problem? Please describe.
Building menus can be tricky, we have JavaScript handling a lot of the interaction accessibility, etc. The pull outs on menus can also be tricky because you want them to display in such a way that they don't get obscured or go off screen.
Our existing menu module code is at: https://github.com/HubSpot/cms-theme-boilerplate/tree/f21d41c50fbc6f28cc8b843a5ad8e497998efebf/src/modules/menu.module
Describe the solution you'd like
Thanks to project baseline, there is now a popover attribute, and CSS properties that can take care of most of these issues for us.
Specifically a combination of position-anchor position-try-options and @position-try.
Due to this being a framework for multi-lingual sites we should use logical properties (inline vs left and right, block vs top and bottom)
Screenshots/source code/links
https://youtu.be/_-6LgEjEyzE?feature=shared&t=1716
Additional context
Solving for this may help resolve #373 out of the box, without additional effort. Note #373 is an old issue and I don't know for sure if the issue still exists.
Checklist
- I have read the CONTRIBUTING document.
- I have checked the issue tracker to make sure there isn’t already an open issue.