Change Details

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 # 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?

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?

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?