Feature Request: Hamburger menu nav

[Tyler-Keith-Thompson]

I really wish that Pico would be a little smarter about mobile device with <nav>. As it stands, it'll just get cut off or I have to add an <aside> myself.

I see somebody attempted a CSS only version of this. I'd really like it if the framework itself supported this.

I'd take anything, but a hamburger menu seems like a reasonable default.

[Yohn]

I actually saw this discussion in Pico's repo, and I think I have a good solution that I'll include in my next release 2.2, within a couple hours.

It's not a hamburger type of menu, but it will allow you to swipe on the horizontal nav's if they go off the screen. I saw this solution a couple months ago and really liked it. I'll update this discussion when I have it implemented!

[arnelap]

why not a normal hamburger? as that is what most web users will expect and know how to use.

I'd also love to see one of the checkbox css only solutions as the example linked above.

[Yohn]

@arnelap
Yeah, after looking at the option I found a few months ago I decided to play with the hamburger option shared earlier. I'm tweaking it up and trying to make it work for a classless version if possible. I think I found a way, just testing and tweaking it. I should be done soon.

[Yohn]

Hamburger menu added for the nav. See the Docs You might have to make the browser window a little smaller in width to see it,
There are multiple different breakpoints that can be applied.

[Tyler-Keith-Thompson]

Thank you for the very fast turnaround! This is great.

Can we add a configuration to swap the direction? I like the hamburger menu (when it shows) on the left, but I had my menu items on the right. That seems to be impossible (and actually breaks if I forcibly try to switch things around) with the current setup.

[Yohn]

I've updated the docs to show the hamburger on both the left and right side. But if you would like to have the hamburger on say the left and the menu items on the right side, yeah that will not work because of how it is set up with the checkbox way of doing this. The elements need to be 1 following the other for this to work.

[Tyler-Keith-Thompson]

Gotcha! I'll take it, the convenience of having the hamburger menu be this easy to implement beats the preference for menu items on the right side.

Thanks again for the quick turnaround, it was trivial to add to my site