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

https://user-images.githubusercontent.com/68207314/183418074-48a76574-e194-4b02-b7e0-e2dbf93c7d29.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

[slorber]

Edit: my comment and discussions above => moved to https://github.com/facebook/docusaurus/issues/7918#issuecomment-1209602294 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 (https://github.com/facebook/docusaurus/issues/4415#issuecomment-1209597904)

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 (https://github.com/facebook/docusaurus/issues/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 https://github.com/facebook/docusaurus/pull/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:

• https://github.com/facebook/docusaurus/issues/8369
• https://github.com/facebook/docusaurus/issues/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 [email protected] 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: https://github.com/facebook/docusaurus/issues/8369#issuecomment-1440464032