Preserve sidebar height when toggling sidebar

[Simek]

🐛 Bug Report

Refs: #4311

Currently the left sidebar do not preserve the height on some of short pages (with long sidebars?), when toggling between collapsed and expanded states.

This is causing the visual "jump" of footer each time user interacts with sidebar mode.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Navigate to: https://v2.docusaurus.io/docs/markdown-features
2. Toggle sidebar
3. (optional) Expand more sidebar groups to increase "jump" height.

EDIT @slorber: note to self: the content is smaller than the sidebar. Don't use the Markdown features page: as of 2022 it is now taller. A better repro page is https://docusaurus.io/tests/docs

Expected behavior

Footer is not "jumping", sidebar height is preserved.

Actual Behavior

Footer is "jumping", sidebar height is not preserved.

Preview

Your Environment

N/A

Reproducible Demo

• https://github.com/facebook/docusaurus/tree/master/website

[tapanchudasama]

I would like to pick this up, if anybody has not started any work on this.

[slorber]

Thanks, nobody is on it, just submit a PR :)

[Josh-Cena]

@lex111 What do you think about this? Would a UX like this make more sense?

I don't know a very robust way to implement it though, and the more I look at it, the more I think a collapse button with persisted vertical position makes sense (see #6717)

[lex111]

It's natural to expect that expanding the content part will shift of elements below, and vice versa. Therefore I don't see why that's such a big issue.

[yzhe819]

Warning
I noticed a sidebar related problem but not sure if this is a new issue.

The displayed portion of the content changes visually when switching between the collapsed and expanded states of the sidebar. When I collapse the sidebar, the page display jumps from the bottom footer to the content section.

To Reproduce

1. Navigate to: https://docusaurus.io/docs/deployment
2. Scroll to the bottom
3. Collapse the sidebar
4. Expand the sidebar
5. Try 3 and 4 multiple times (You can notice the vertical shift of web page content)

Demo

video1197996455.mp4

Before the sidebar is collapsed, the page is at the bottom, but after the sidebar is collapsed and expanded, the page will jump to the Deploying to Layer0 section.

cc @Josh-Cena

[Josh-Cena]

No—I'd say that's not expected! I can reproduce this. Could you open a new bug report? Would be great if you can investigate yourself as well.

[Josh-Cena]

The jump happens on every page—the longer the page is, the more significant it gets. Can be easily observed here as well: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs

[yzhe819]

Cool, I'll open a new issue first