Menu: nested variant

[mcilurzo]

We want to be able to nest menus. This means being able to connect a <sbb-menu> to a <sbb-menu-button>.

Figma: https://www.figma.com/design/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?m=auto&node-id=355-953891&t=ngKzhnD2FtZzbqqF-1

Design Spec:

• From medium to ultra, the sub menu should align itself horizontally to the triggering menu button
  • The horizontal direction should prefer inline-end and if not enough space is available, should switch direction to inline-start (but switch back to inline-end for the next nested menu, if space is available). This can overlap a previous menu.
• Below medium, the sub menu should hide the previous menu and show the sub menu without animation (for now)
  • In the mobile case, there should be an additional button at the bottom to go back to the previous menu
  • New: Animation suggestion is not to move the current menu out of frame to the left and the new menu into frame from the right (and with closing vice-versa)
• A menu button that has a connected menu should display an arrow at the end

Technical Spec:

• From medium to ultra, the submenu should appear with mouseenter over the connected menu button and disappear with mouseleave (unless moving into the submenu)
  • There should be no effect to clicking on the connected menu button (e.g. do not close the menu or sub menu)
  • With keyboard navigation the submenu should open, when pressing arrow key right on the connected menu button and leave a submenu with arrow key left. Esc would close/leave the menu completely. Tab navigates to the next menu button/link.
• Below medium, the sub menu should be displayed when the connected menu button is clicked
  • A click on the back button should close the current menu and display the previous menu
• A click on the backdrop should close all menus