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.

[slorber]

Edit: my comment and discussions above => moved to #7918 (comment) which indeed is a separate issue

[Josh-Cena]

Reverted the title change to prevent confusion with #7918, which are two distinct issues (this one is about maintaining sidebar height; that one is about maintaining page scroll position)

[Josh-Cena]

Here's a reproduction on a "simulated large screen" (via zoom level) in case that helps with understanding:

Note there's no content layout shift. Only the footer shifts.

[slorber]

This is a much better test case, no need to set any zoom level, just click the sidebar collapse button: https://docusaurus.io/tests/docs

[0916dhkim]

I opened a small PR to solve this issue here #8195

[slorber]

Note this page looks also weird on a vertical screen, we should fix that too:

https://docusaurus.io/tests/docs

There's even a little layout shift on hydration:

[pea-nut-z]

A reproduction of (#4415 (comment))

I believe this only happens when the right content is shorter than the navbar menu. The footer shifts because the additional space needed to fit in an open navbar menu longer than the right content. All the right content is longer than the navbar menu now, so this shouldn't be a problem anymore.

Here is an example where the content is longer than the menu and works just fine. However, it is working also because there is no word wrap issue, as discussed in (#7918)

The cause for the footer shift should be only the word wrap now. Let me know what you think. Thanks!

[pea-nut-z]

Note this page looks also weird on a vertical screen, we should fix that too:

Would you like a CSS detection for the vertical screen and then utilize the same navbar reveal on mobile devices - a button in the top left corner?

[0916dhkim]

Would you like a CSS detection for the vertical screen

So something like @media (min-aspect-ratio: 8/5) ?

[pea-nut-z]

Would you like a CSS detection for the vertical screen

So something like @media (min-aspect-ratio: 8/5) ?

Check out this

[slorber]

This is not a problem of vertical/horizontal/ratio but just having more vh than the sidebar + main content

There are good existing repros to both problems here:

• https://docusaurus.io/tests/docs
• https://docusaurus.io/tests/docs/doc-with-another-sidebar

[pea-nut-z]

This is not a problem of vertical/horizontal/ratio but just having more vh than the sidebar + main content

Thanks for explaining that. Here is what I did.

Move the navbar to its outer container - "main-wrapper" in blue, so it will always take up the white space available, giving it a minimum height instead of depending on the content length.

The result

Is this what you're looking for?

[slorber]

@pea-nut-z honestly not sure what I want exactly, need to see it live and play with it to feel the UX on different edge cases.

Can you open a PR with this suggestion?

[lex111]

This is not a problem of vertical/horizontal/ratio but just having more vh than the sidebar + main content

It shouldnt be that way, Ive fixed it erlier, apparently it's broken again #7025

[0916dhkim]

@slorber Would you look at #8328 and let me know what you think?

[slorber]

This issues' bug is fixed by @0916dhkim in #8328 👍 thanks

Opened 2 other related docs layout issues discovered in the process:

• Docs layout issue: content container does not grow to take all the available space #8369
• Docs layout issues when announcementBar visible #8370

[cainmagi]

Current version

Docusaurus 2.3.1

Description

This issue appears again because someone made a change from:

.main-wrapper {
  display: block;
}
.main-wrapper docsWrapper_XXXX {
  display: flex;
}

to

.main-wrapper {
  display: flex;
  flex-direction: column;
}
.main-wrapper docsWrapper_XXXX {
  display: flex;
  flex-direction: column;
}

How to reproduce

Just initialize the standard template:

npx create-docusaurus@2.3.1 test-doc classic
cd test-doc
npm start

Then go to this page:

http://localhost:3000/docs/category/tutorial---extras

My solution

I made a hot fixture for this issue by modifying the src/css/custom.css:

/* Fix a bug caused by Docusaurus, which makes the sidebar not expand again! */
.docs-wrapper div.main-wrapper {
  flex-direction: row;
}

But I believe that this issue should be solved by modifying the source codes of Docsauraus. Please take a look at the source codes, sir @slorber. Thank you!

[slorber]

@cainmagi should be fixed for upcoming v2.4 and v3 already:
#8369 (comment)