Navigation submenus: Add viewport awareness smarts to the opening direction

[jasmussen]

When a navigation block has submenus, these submenus open by default, down and right:

There is CSS in place to open down and left when the navigation menu is justified right:

This works reasonably well for basic menus, and benefits from being CSS only. However a few limitations are also present. For one, if your menu is left aligned, but has enough items for there to be a dropdown menu towards the right of the screen, this will still open rightwards:

There's also the challenge of nested submenus continuing in their initial direction, which means when you get enough levels deep, you'll bump off the edge of the screen.

In both cases, you can editorially take care to avoid this. But it would be nice to explore some programmatic enhancements to flip the direciton of submenus based on available viewport space.

This could be extended to nested submenus as well, going back and forth based on available space, and even flipping the direction of the chevron to point in the direction the menu opens it.

It would need to be resize aware, and would probably work best by applying CSS classes to submenu containers, such as opens-left or opens-right, or any better terms we can think of.