cms-theme-boilerplate icon indicating copy to clipboard operation
cms-theme-boilerplate copied to clipboard

Enhancement: update menu to use project baseline

Open TheWebTech opened this issue 9 months ago • 0 comments

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

  • [x] I have read the CONTRIBUTING document.
  • [x] I have checked the issue tracker to make sure there isn’t already an open issue.

TheWebTech avatar May 16 '24 16:05 TheWebTech