Mobile navigation

[dennisreimann]

In #3277 there are three proposals for the mobile navigation:

As this is something to be tested and experienced, here's as first version the horizontal scrolling approach (first example).

Personally I think this one has some downsides:

• Horizontal scrolling is not a widely used UX pattern
• Items might be overlooked, because the user might not know that there are more nav links available (out of visible area)
• After navigation the scroll position resets and the currently active item might not be visible. (This could be doable using JS though)

To prevent the second problem, I've added scroll indicators on the ends (see screenshot).

I'd prefer the second approach, though I see the downside of an added click to open the dropdown before selecting the nav item.

This version was easier to implement though, so I thought let's give it a go and try it.
Let me know your thoughts, @pavlenex @dstrukt.

Closes #3277.

[dstrukt]

Ooo I was curious myself, even if it's not feasible.

Will take a look later today!

[pavlenex]

I mean many apps like Instagram use horizontal scrolling, I don't think it's an uncommon pattern.

[dstrukt]

Took a look on iOS Safari. Looks great!

I like the horizontal menu, would definitely like to see a variety of device sizes test this though .. the concern that the gap between tabs could obscure the fact there are more nav items is a legitimate concern.

Another thing to consider is the viewport size, do we lock it to 1, and prevent zooming?

1. Would like the content overlay on nav open to be black, not white, in Light Mode, but that's a subtle note.

2. Some visual display bugs, imagine this is probably consistent across the app:

[dennisreimann]

Updated the overlay/backdrop color and reduced the space between the nav items on mobile.

[pavlenex]

LGTM would require some of us playing a bit on mobile, but on the surface I don't see any problems except one:
This should be fixed 😄
Not sure if this PR introduced it, but noticed it here.

[dennisreimann]

Oh yeah, thanks @pavlenex – we seem to be using the modal class wrongly there.

[pavlenex]

@dennisreimann Seems like also in modals, delete a store and here

2022-01-19_10-14-42.mp4

[dennisreimann]

Yup, sorry it was me rushing it. Will send a fix.

[dstrukt]

Was thinking about this last night, I'm also wondering if it might be helpful to leave the bottom border for mobile as well..? It's a little less minimal I suppose, but does make the length, etc.. quite clear.

[dennisreimann]

I'm also wondering if it might be helpful to leave the bottom border for mobile as well..? It's a little less minimal I suppose, but does make the length, etc.. quite clear.

Yes, tried and applied it, good suggestion!

I'd say this one is good to go. As I said it is already better than what we currently have and we should ship with this one applied.

[dstrukt]

Will take a last look, but was happy with where it was, if the only additional is the bottom border .. approval incoming!