Improve hamburger menu on mobile

[jrobbins]

Replace the 4 top tabs with a hamburger menu consisting of 4 items. Move the "Stats" submenu items to indented items in the hamburger menu.

On desktop, keep the existing location for the site name, "Create feature" button, and sign-in button / account menu. But on mobile, move the buttons and account menu into the top of the hamburger menu. This would probably be accomplished by having those items in both places in the DOM, but using CSS media queries to have one or the other instances of those elements be hidden.

You would probably use sl-icon-button and sl-drawer https://shoelace.style/components/drawer?id=contained-to-an-element Or, you could build it using standard HTML elements, e.g., <aside> or <nav> for the hamburger menu area, a checkbox that looks like the button to open it, and a CSS rule that conditionally displays the <aside> based on the checkbox state.

Ideally, on desktop the hamburger menu would default to being initially open, whereas it would default to being closed on mobile. Also, while the drawer would overlap content on mobile, on desktop the content of the page should add left margin to avoid overlap in the situation where the hamburger menu drawer is open.

We should look up accessibility guidelines for a hamburger menu. E.g., does the screen reader read it even when it is closed?

Wireframes: https://docs.google.com/drawings/d/1szNbci26b2zV960a5WT3F8eDFNFwjWbqaZ7f_vHycHE/edit

[jrobbins]

A quick search for "accessible hamburger menu" turned up several plain HTML / CSS / JS implementations. But the key points seem to be:

• Add role="navigation" aria-label="Main menu button" on the button
• Add role="navigation" aria-label="Main menu" on the menu itself
• Test that the whole thing works using keyboard navigation via tab and space keys
• Check the tab order: e.g., it should go in sequence from the button into the menu iff the menu is open
• Check the whole thing using an actual screen reader

[KyleJu]

After https://github.com/GoogleChrome/chromium-dashboard/pull/3134 and https://github.com/GoogleChrome/chromium-dashboard/pull/3135, the outstanding issues are

• log-in does not work properly in chromedash-featurelist, on mobile
• content shifting does not work properly in chromedash-featurelist, on mobile