feat: add navigation menu for mobile

[ryuapp]

close #40
If horizontal width of a navigation list exceeds a window size, it will store them in a small menu.

Preview

[donjo]

thank you! so happy to see this get cleaned up.

One thing I'd like to see fixed before we merge is how this handles using tab to navigate. Right now I can't seem to navigate to the items available in the dropdown by hitting tab unless the dropdown is already open. I would expect to be able to tab to the dropdown and open it to view the contents inside right after tab is focusing on Versions.

Mobile users won't necessarily see this but a lot of people use mobile viewport widths on their desktop to have reference docs alongside their editor so it would be nice to have this working for keyboard-only users in that setting.

[josh-collinsworth]

While this does address the original problem, I'm concerned it creates another.

I worry it isn't obvious that the … dropdown button is related to the menu of visible items, and I don't think having some menu items outside a dropdown menu and others inside is a conventional or obvious pattern. It could easily look to users like the dropdown button is something unrelated to the items they can see, and they might not consider checking inside it for the other items, given that tenuous connection between the button and the menu.

This being the case, I would personally champion one of the following alternatives:

1. The items could sit together on one line that scrolls horizontally (given obvious enough scroll indicators); or
2. All of the items could be in a single dropdown/select menu.

I'm open to other solutions I haven't considered as well, if they're intuitive enough. I just don't think the tradeoff here—saving some vertical real estate—is worth introducing a potentially confusing UI pattern.

[iuioiua]

This being the case, I would personally champion one of the following alternatives:

1. The items could sit together on one line that scrolls horizontally (given obvious enough scroll indicators); or
2. All of the items could be in a single dropdown/select menu.

My $0.02 (not that anyone asked) is I like option 1.

[ryuapp]

One thing I'd like to see fixed before we merge is how this handles using tab to navigate. Right now I can't seem to navigate to the items available in the dropdown by hitting tab unless the dropdown is already open. I would expect to be able to tab to the dropdown and open it to view the contents inside right after tab is focusing on Versions.

I fixed the accessibility issue.

This being the case, I would personally champion one of the following alternatives:

1. The items could sit together on one line that scrolls horizontally (given obvious enough scroll indicators); or
2. All of the items could be in a single dropdown/select menu.

Option 1 is user-friendly on mobile, but it is very painful on PC because there is no mouse wheel for horizontal scrolling.
So I prefer option 2 to 1. However, it is easier to navigate between screens if items of the menu is partially displayed.
If it change from ... to More..., the problem may be slightly improved.

[lucacasonato]

One further bit of data:

GitHub also does the Tab bar with overflow into a ... menu.