Quick win before implementing the Global Menu

[julien-deramond]

Description

Global menu is a really complex module to implement with a generic approach and is not yet prioritized.
However, projects in production use it and have their own implementation, or rely on the Orange megamenu available in Boosted v4.

This issue is a study to see how we could help these projects to have some quick wins, at least ensuring the right rendering.
The DOM is complex in such a menu, but the JS would be more complex.

The idea here is to let for now the projects in production handling the JavaScript part (based or not on the previous Orange megamenu).

Right arrow

As defined in ODS > Global menu, for a multi-level approach on mobile, there is an arrow showing that there is a deep navigation:

A first approach would be to provide the rendering of this arrow based either on a new specific class, or, if possible rather on something that we know will be mandatory to use in terms of a11y. I'm thinking right now about the aria-collapse.

• If there's no aria-collapse, the rendering is without any arrows
• If there's an aria-collapse="false", the rendering is with an arrow

I've prototyped something really quickly, showing this in https://codepen.io/julien-deramond/pen/WNWPVBy. Please note, that the hover state and other states are not defined in this CodePen.

Deep navigation screen

After having clicked on this menu, the screen is different as the supra bar content disappears:

• There is a new "< Previous" at the previous place of the supra bar
• There is an orange big title with the name of the current section/page
• Then, the menu as usual

For this part, we need to define what would be the right DOM to use so that projects could handle the screen switching themselves in JavaScript (or other), and we would only provide the style for the 2 first parts.