Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(theme): preserve sidebar height on collapse #8328

Merged
merged 1 commit into from Nov 24, 2022

Conversation

0916dhkim
Copy link
Contributor

@0916dhkim 0916dhkim commented Nov 12, 2022

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

fix #4415

Test Plan

2022-11-12.12-05-41.mp4

Test links

Deploy preview: https://deploy-preview-8328--docusaurus-2.netlify.app/tests/docs
Same page on prod: https://docusaurus.io/tests/docs

Related issues/PRs

#4415

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Nov 12, 2022
@netlify
Copy link

netlify bot commented Nov 12, 2022

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 71300e2
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/636fd0ff64e5d200084c88c6
😎 Deploy Preview https://deploy-preview-8328--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions
Copy link

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 63 🟢 97 🟢 100 🟢 100 🟢 90 Report
/docs/installation 🟠 81 🟢 100 🟢 100 🟢 100 🟢 90 Report

Copy link
Contributor Author

@0916dhkim 0916dhkim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of changes I made:

Comment on lines +63 to +68
<div
className={clsx(
styles.sidebarViewport,
hiddenSidebar && styles.sidebarViewportHidden,
)}>
<DocSidebar
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrap the .sidebar element with a new .sidebarViewport element.

Comment on lines +33 to +38
.sidebarViewport {
top: 0;
position: sticky;
height: 100%;
max-height: 100vh;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.sidebarViewport is a sticky element that's clamped to screen height. Its width will shrink on collapse.
.sidebarViewport, .sidebar, and .expandButton elements will have the same height (on collapse & expand).

@@ -24,8 +20,6 @@

.sidebarHidden {
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.sidebar will not shrink in size on collapse anymore. It will just become invisible. This preserves the height.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, looks better indeed 👍

Wonder if it affects accessibility and keyboard navigation? Is it possible now to navigate with the keyboard (tabs) on these hidden elements?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@slorber That's a good point. I haven't tested keyboard navigation on hidden elements.

onCollapse={toggleSidebar}
isHidden={hiddenSidebar}
/>
{hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put .expandButton inside .sidebarViewport (outside .sidebar).

@0916dhkim 0916dhkim marked this pull request as ready for review November 12, 2022 17:19
Copy link
Contributor

@lex111 lex111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brilliant solution 👍 , I really shouldn't have hidden the sidebar content when collpasing, that was the cause of this bug.

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, that looks like a good solution 👍

I noticed that our dogfood sidebar with ads on top/bottom now produce some weird behavior, can you take a look please?

It seems related to the presence of the announcementBar

CleanShot 2022-11-24 at 12 49 47@2x

@@ -24,8 +20,6 @@

.sidebarHidden {
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks, looks better indeed 👍

Wonder if it affects accessibility and keyboard navigation? Is it possible now to navigate with the keyboard (tabs) on these hidden elements?

@slorber
Copy link
Collaborator

slorber commented Nov 24, 2022

Hmmm, nevermind, can also reproduce this issue on prod 😅 : https://docusaurus.io/tests/docs

@slorber
Copy link
Collaborator

slorber commented Nov 24, 2022

This doesn't improve that case:

CleanShot 2022-11-24 at 14 38 05@2x

But that's a separate issue, will see if I can fix it in another PR

@slorber slorber added the pr: bug fix This PR fixes a bug in a past release. label Nov 24, 2022
@slorber slorber changed the title fix: preserve sidebar height on collapse fix(theme): preserve sidebar height on collapse Nov 24, 2022
@slorber
Copy link
Collaborator

slorber commented Nov 24, 2022

LGTM thanks 👍

@slorber slorber merged commit 1bf0589 into facebook:main Nov 24, 2022
@slorber slorber added the to backport This PR is planned to be backported to a stable version of Docusaurus label Jan 26, 2023
@slorber slorber added backported This PR has been backported to a stable version of Docusaurus and removed to backport This PR is planned to be backported to a stable version of Docusaurus labels Jan 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backported This PR has been backported to a stable version of Docusaurus CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Preserve sidebar height when toggling sidebar
4 participants