Add table of contents toggle for low-width devices

[jryans]

This adds a button to show / hide the TOC column on low-width devices.

It also adjusts various styles to keep the top bar fixed as you scroll so that the TOC toggle button remains accessible anywhere in the document. Flexbox is used in the low-width nav bars to improve vertical centering.

The appearance on high-width devices is unchanged. No TOC button is shown there.

https://user-images.githubusercontent.com/279572/132976575-bc61329e-c1fc-4cb1-a936-4fd9bbcd869d.mov

Fixes https://github.com/racket/scribble/issues/313 Also fixes https://github.com/racket/scribble/issues/305

[sorawee]

This is very nice! And it also avoids the problem in #305!

[jryans]

And it also avoids the problem in #305!

Ah yeah, indeed, the z-index tweaks I made while overlaying the TOC column also resolve that issue as well. 🙂

[mflatt]

Checking before merging: Would it be better to use "TOC" instead of "toc", since it's an abbreviation? I'm guessing that "contents" would be too wide.

[jryans]

@mflatt Thanks for taking a look! 🙂 I wasn’t quite sure what label would be best… Mainly I felt a short lowercase label would fit in best next to top, up, etc., but you’re right that “TOC” is more grammatically correct… Perhaps “nav” (as a short form of navigation) could work as an alternative?

[jryans]

It does seem like there’s enough room for “contents” as well, though it’s a tad longer than the other navigation actions.

[mflatt]

I don't have a strong opinion, and maybe someone else will have a good idea. But if "contents" fits on relevant screen sizes, then I lean toward that.

[jryans]

@mflatt Okay, I have updated to use "contents". It appears to fit down to the iPhone SE size (320 px). Even smaller devices do exist, but the current overall document style needs some tweaking for such small sizes (you start to get horizontal scrolling of the whole page etc.), so I think this feature is okay in assuming "at least 320 px".

[mflatt]

Thanks!