Docusaurus: Header links on mobile get cutoff

[JoelMarcey]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Chrome development tools

Steps to Reproduce

https://github.com/babel/website/issues/1556

Expected Behavior

All header links shown

Actual Behavior

https://github.com/babel/website/issues/1556

Reproducible Demo

https://github.com/babel/website/issues/1556

[maazadeeb]

I would like to fix this! What should be the behavior when the links in the header overflow the viewport? When I say behavior, I mean how should all the links be shown when there is an overflow?

[JoelMarcey]

@maaz93 That would be great if you wanted to tackle this.

I think there are three options:

1. Make the font smaller
2. wrap the cutoff to another line/row in the header
3. Create some sort of menu system (hamburger?) for those that are cutoff.

I would think that (1) would be easiest, but maybe less scalable for long length headers. On the other hand, should we make assumptions on how long a header will realistically be.

(2) Might be a good compromise. Not sure how good it would look though.

(3) Might be more elegant. But harder to deal with.

[maazadeeb]

I agree that (1) is not scalable and probably not a good solution too. (2) and (3) will require some sort of javascript intervention I think. (3) looks less hacky and more intuitive, but definitely more work.

For trying out (2), just changing the flex-wrap to wrap in the header, looks something like this:

Obviously the page content needs to be adjusted, but the links that have overflown somehow look like they are more important. Would this be OK?

I'll see how I can implement (3) as well.

Also, I found another solution. It's definitely less intuitive but it works. A scrollbar in the header:

What do you think?

[JoelMarcey]

@maaz93 Ooooh - a scrollbar in the header. I actually think I like that. I think it may be intuitive given that touch and scrolling are natural on a mobile device. Maybe let's go with that.

[JoelMarcey]

Reopening