fixes docSideBar

[r-lawrence]

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

I originally tried to fix this issue a few months back. My original attempts just looked at the CSS strictly. Since then, I have learned a substantial amount about React Hooks, so I decided to take another look at it and was able to come up with a solution.

The Problem:

When the announcement bar is present it takes up 30px of space at the top of the page. This causes all the elements below it to adjust their position. Previously it appears we attempted to set up a useState, useEffect, and useContext hooks to handle this issue. This hook functionality essentially added a margin-bottom of 30px when useAnnouncementBar context returned true. This functionality was added to the nav element located at packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/index.tsx. This attempt was close to fixing this issue, but instead we needed to:

• change the height of the entire container instead of margin.
• also the height needed to be changed dynamically as the scroll was happening. 30px would work when the scrollY
  value was 0, but as the user scrolled, it needs to adjust dynamically based on current scrollY position.

The Fix:

In order to fix the issue I:

• moved the useContext, useState, and useEffect functionality from packages/docusaurus-theme- classic/src/theme/DocSidebar/Desktop/Content/index.tsx to packages/docusaurus-theme- classic/src/theme/DocSidebar/Desktop/index.tsx.
• Added functionality to adjust the entire sideBar height dynamically. Because this style needed to be set dynamically, it was set within the react component itself using the style attribute.
• removed the margin css that was previously added because it was no longer of use.

Note:
When adding the height functionality, some unwanted side effects starting occurring when reducing window size to less than 277px height. When less than 277px, the sidebar close button would start overlapping the other elements in the sidebar. To fix this issue I:

• changed the sidebar close button to no longer have a position of fixed.
• added a min-height property to ensure that the sidebar would not reduce its size to anything less then 277px. This matches what we currently see in production with one caveat:
  • at a window height size of less than 277px, the side bar close button becomes less visible and can only being seen by scrolling down on the entire page. This didn't seem ideal, but because the side bar now correctly displays with or without the announcement bar at 277px window height or greater, I figured it was a better solution then whats currently seen in production. If anyone has any suggestions on how we can match how it looks previously from window heights 177px - 277px, that would be awesome.

below there is a video and screenshots.

• the video shows the solution working on my local computer. This solution can also be viewed on the deployment preview link listed below. I'm not sure how long these links are active, so if it expires, you may have to test it on your local machine.

• there are 4 screenshots. Two of them show what the sidebar looks like after this fix, at minimum window height with and without the announcement bar active. The other two show what it looks like currently.

video demonstrating fix:
https://github.com/facebook/docusaurus/assets/62929526/a75e8dcd-c6f0-4608-a401-a20654ca8010

screenshots with fix

screenshots without fix

Test Plan

from your local machine:

1. download this branch to your local
2. start the server using yarn start
3. verify at the below URL's there is no longer overlapping issues in the docSidebar when resizing screen. An example of what this bug looked like can be found here.

• navigate to http://localhost:3000/tests/docs
• navigate to http://localhost:3000/tests/docs/toc/toc-_-5/
• navigate to http://localhost:3000/docs/sidebar/items

from the deployment preview:

1. verify at the below URL's there is no longer overlapping issues in the docSidebar when resizing screen.

• navigate to https://deploy-preview-8966--docusaurus-2.netlify.app/tests/docs
• navigate to https://deploy-preview-8966--docusaurus-2.netlify.app/tests/docs/toc/toc-_-5/
• navigate to https://deploy-preview-8966--docusaurus-2.netlify.app/docs/sidebar/items

Note:
When testing if you close the announcement, you can re-enable it by clearing your local browser storage.

Test links

Deploy preview: https://deploy-preview-8966--docusaurus-2.netlify.app/

Related issues/PRs

Issue #8370

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b0e8e86
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/645c9ddd0ade490008d79952
😎 Deploy Preview	https://deploy-preview-8966--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle 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]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 76	🟢 97	🟢 92	🟢 100	🟠 89	Report
/docs/installation	🟠 83	🟢 100	🟢 92	🟢 100	🟠 89	Report

[slorber]

Didn't have much time to study your solution in depth, but I see layout shifts on React hydration.

Make sure your PR looks good with 3G slow network simulation before/after hydration and with/without scroll

[slorber]

Not a super fan of magic numbers like these 😅

[r-lawrence]

Hello @slorber,

Currently I am unable to fix the layout shift. I'll keep working on this, but I'm going to close this PR in order to give others the opportunity to create a fix.