HubSpot / cms-theme-boilerplate

A straight-forward starting point for building a great website on the HubSpot CMS
https://boilerplate.hubspotcms.com
Other
355 stars 355 forks source link

Enhancement: update menu to use project baseline #505

Open TheWebTech opened 6 months ago

TheWebTech commented 6 months ago

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