🧭 Move collapsed top-bar to primary sidebar on small screens

[agoose77]

This PR reworks our TableOfContents as a PrimarySidebar. In doing so, it adds a new navigation section that is visible below the lg selector (the breakpoint at which the top-nav disappears).

• >lg:
• <lg:

This uses the same Radix components as the TOC, so it feels on brand.

Fixes #402

[changeset-bot]

🦋 Changeset detected

Latest commit: 0c735a3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@myst-theme/frontmatter	Minor
@myst-theme/site	Minor
@myst-theme/book	Minor
@myst-theme/common	Minor
@myst-theme/article	Minor
@myst-theme/providers	Minor
@myst-theme/diagrams	Minor
@myst-theme/jupyter	Minor
@myst-theme/styles	Minor
@myst-theme/icons	Minor
myst-to-react	Minor
myst-demo	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[choldgraf]

From a UX perspective I think this is an improvement over what we've got right now (which is that they just disappear). It also matches what the pydata theme does:

The PST takes it a step further and puts all header items into the top section of the primary sidebar (except for a dedicated search button). But I think that's a decision that could be made in the future (e.g. whether to put them all in the sidebar, or have them split between primary and secondary sidebars, or have some other way to access header items on narrow screens).

[agoose77]

@choldgraf Yes, PST is a really good prior-art reference for what we might want to happen here. With all of the open PRs merged we should be in a reasonably good spot for small viewports. Folding in other components like the logo and/or logo_text might be something to think about too. But, I also feel that the best practices there also mean it's less of an issue; small logos with text, or big logos without text seem like the best approach in the top bar.

I'm hopeful we'll get all this in, and then do another round of UX evaluations.

[stevejpurves]

@agoose77 made some initial changes here with the intent of keeping the components reusable in other themes including composed themes like mystmd.org which doesn't yet work out of the box with these changes. Basically this is lifting props and letting components higher up the render tree (ideally in the themes) deal with getting the right SiteManifest etc...

This PR is looking good but I'd like to get a parallel PR up on mystmd.org consuming these before merging. Doing that next.

[stevejpurves]

We've also lost alignment after this PR

BEFORE:

AFTER:

[agoose77]

@stevejpurves I don't think it's this PR that broke alignment; I think something else that merged into main already did this.

[stevejpurves]

@agoose77 I've fixed alignment here in any case as doing so requires moving between this repo and other dependent repos - so to avoid duplicating work, and as the changes required are in the PrimarySidebar as well as a couple of other places, doing it in this pass.

[stevejpurves]

OK this is good to go!!!

Made some changes to scroll behaviour as the 2 independent scrolling units in the sidebar does not work well.

book-theme-nav.mp4

Intending to bring this in ASAP to unblock PR's elsewhere