Nodejs.dev: Top menu strategy for mobile?

[rodion-arr]

Hi Team,

We have a horizontal scroll on mobile currently due to wide menu items:

I'd like to know do we have a design decision regarding top menu on mobile?
Maybe I just missed it in Figma? :)

[manishprivet]

How does a classic Hamburger menu sound like? The items in the menu are gonna increase over time actually, and we something that can contain them.

[joesepi]

Deleted previous comment as the original post had an accurate image. The site "appears" fine on mobile but the day/night icon and github icon were off to the side as shown above. :(

[manishprivet]

Another possible solution can be to fix the Nodejs logo on the left, dark mode button, and GitHub icon on right, and making the links horizontally scrollable? I wanted to work on this, but unsure which one to follow. @benhalverson @designMoreWeb

[benhalverson]

let's go with the hamburger menu.

[lancemccluskey]

@manishprivet Are you actively working on this? If not id like to work on it

[lancemccluskey]

Linking #1322 for visibility.

[manishprivet]

@lancemccluskey I'm actually working this 😅

[benhalverson]

We were talking about this issue today in the website redesign meeting. We agreed that a design that looks more like should be implemented.
https://excalidraw.com/#json=4916647710162944,cT5qOWo5Y5KeoM0V2bBAZQ

Is this how you did the quick sketch @obensource

[obensource]

@benhalverson you got it! 👍

The nav links should probably use a space-between with flexbox (so they create a 'nav border' at the top, if you will 😄), otherwise it might end up looking like a bunch of floating links if they're centered or whatever. Anyways, thanks a million for your work @benhalverson! 😎

[manishprivet]

If we're sure that no more links will be added to navigation in near future, then I'll implement this instead of hamburger 😅