Add separate on-page navigation sidebar

[microbouji]

Motivation

This is how the table of contents generated from the document's headers can be displayed as a separate sticky sidebar on the right side of the document. I can write the corresponding docs when we finalize on all the ways the navigation can be displayed through the option onPageNav. This is currently using 'separate'. The other possible values could be false for no on-page navigation, or 'inline' to have it show up underneath the current item's link in the existing sidebar similar to #349.

As for the heading tags used to generate the TOC the default is same as this:

onPageNavHeadings: {topLevel: "h2", sub: "h3"}

topLevel and sub can be strings like above or arrays of strings. sub can also be a falsy value or empty array to indicate the user only needs top level headings.

Another example:

onPageNavHeadings: {topLevel: ["h2", "h3", "h4"], sub: null}

This will collect all h2, h3, and h4 tags as top headings and generate no sub headings.

Test Plan

All css rules are only applied in browsers that support the css sticky position, and larger than 1024px screens. With this option on (onPageNav: 'separate') the menu wrapper becomes wider site-wide. That's the only change that affects all the site. All other css changes only affect doc pages.

Related PRs

#474

[JoelMarcey]

@microbouji 😮 Yay!

Does the new babel site use something similar to separate?

I like separate, inline or embed, and none for options to the new siteConfig option onPageNav.

[microbouji]

Yep. Only difference is at babel the left sidebar is fixed in place too. I thought that would be too big of a change for all docusaurus sites. Now that I think about it, it is behind an opt-in flag so it could work. Let me know what you think, if I should make the left sidebar fixed as well.

[JoelMarcey]

@microbouji I am game for that as an opt-in option as well. When the PR is complete, I can pull it in and test it on the Docusaurus site -- or you can too as you are developing it.

[microbouji]

I made some minor fixes and this is ready to review now. Add the onPageNav: "separate" to siteConfig to test. I didn't end up making the main sidebar sticky - that makes more sense for the 'embed' case where you want the left sidebar to always be visible after you click on an anchor link.

[JoelMarcey]

[JoelMarcey]

This looks really good! 😄

[JoelMarcey]

<3