design(www): Mobile-optimized table of contents

[tesseralis]

Summary

Create a mobile-friendly table of contents (TOC).

Basic example

The one in sites made with Docusaurus is pretty good: instead of the table of contents being at the top of the page, there's a button you can click on it to expand it and list:

Motivation

One motivation for this (I think) is accessibility. Even if they skip the navigation, mobile screenreader users will have to go through each table of contents item before they reach the main content.

Even for sighted users, it's annoying to have to scroll all the way down the TOC to get to the main content of the page. In some pages with many sections, the TOC takes up the entire page and actual page content is pushed under the fold.

It's also very easy to get lost in longer articles, and the mobile site right now has no way to see where you are -- unless you scroll to the top of the page.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜