Collapsable Right Nav + "Edit on GitHub" Link

[thedavidprice]

GitBook has a nice responsive UI for the right sidebar Nav. The "edit on github" link is a helpful feature as well.

See an example here: https://basarat.gitbook.io/typescript/getting-started

Screenshots

Full width

Collapsed

[sjmiddlebrook]

@cannikin @thedavidprice Hi, I'm new to Redwood and looking for a first issue to take on and get involved. I'd be happy to work on this one.

[thedavidprice]

@sjmiddlebrook huge thanks in advance for offering to help! 🚀

I definitely +1 this. @cannikin as our, ahem, WebMaster9000™ what do you think/suggest?

[cannikin]

So right now the responsive layout goes:

Small-Medium: Hamburger menu containing main nav Large: Main nav at left X-Large: Main nav at left + "On this page" nav on right

@thedavidprice When you suggested this were you thinking this is so that we can include the "On this page" nav on large screens, or small and medium as well? Shouldn't be too bad on large screens, but on small/medium we're talking double hamburgers, or nested navs or something...could get weird.

[thedavidprice]

Correct, I'm proposing to use this for small <--> large screens. Per example: https://basarat.gitbook.io/typescript/getting-started

Agreed we don't want "stacked" hamburgers, but if we want to keep main nav hamburger on right, we could swap icons or even use text, e.g. "^Sections", "^On this Page". I think our current main nav hamburger (currently only containing the left column nav) would actually work quite well on the left.

(Note: our current hamburger doesn't contain the top nav links, e.g. forum, discourse, etc. --> seems like we should include those as well... if in agreement let's open a separate issue.)

Here's the example on iPhone X size emulator To me, this UI is very comprehensible.