Blockers for this work: T306609
With the new feature flag FEATURE_ARTICLE_TOOLS_MENU in place (T306609) we will begin work on the new page tools feature
The main menu is currently a dropdown menu, but behaves differently from other dropdown menus. In this task we'll make it behave like the tools/more menu, the table of contents menu, and the user menu dropdowns
https://vector-2022.web.app/Moth
| default state | pinned state
| -- | --
| {F35521724} | {F35521726}
# Scope
The following is **NOT** in scope for this ticket.
[] The persistent code should work exactly the same as before. If I open the menu and click a link in the menu, in the next page, the menu should remain open (changing this behaviour is out of scope for this ticket)
[] No changes to the existing contents of the sidebar should be made as part of this ticket. (see T317898)
[] Pinnable behaviour is not part of this change
# TODO
[] When feature flag is disabled, no visual changes
[] When feature flag is enabled, the sidebar becomes a dropdown that overlays the content. Clicking (not hovering) the button shows the menu. Clicking it again closes it.
[] The main menu landmark is inside the header, and includes both the main menu button and the main menu dropdown
[] Users can directly tab from the main menu button to the main menu dropdown
## Instrumentation
[] Make sure all menu items have unique event-data-name attributes suffixed with ".dropdown". For example clicking the main menu link currently triggers an event n-mainpage-description, however when clicked inside the dropdown we want that to be n-mainpage-description.dropdown. Use your best judgement on whether to add this in JavaScript or PHP.
# Open questions
[] Should there be a max height on the menu?
[] What if the menu is larger than the available screen space ? Should there be a scrollbar?
[] Are we dropping the < arrow icon as part of this change?