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

packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css

@@ -7,10 +7,11 @@
 
 @media (min-width: 997px) {
   .expandButton {
-    position: sticky;
+    position: absolute;
     top: 0;
+    right: 0;
+    width: 100%;
     height: 100%;
-    max-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;

packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -60,15 +60,20 @@ export default function DocRootLayoutSidebar({
         }
       }}>
       <ResetOnSidebarChange>
+        <div
+          className={clsx(
+            styles.sidebarViewport,
+            hiddenSidebar && styles.sidebarViewportHidden,
+          )}>
           <DocSidebar
             sidebar={sidebar}
             path={pathname}
             onCollapse={toggleSidebar}
             isHidden={hiddenSidebar}
           />
-      </ResetOnSidebarChange>
-
           {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+        </div>
+      </ResetOnSidebarChange>
     </aside>
   );
 }

packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/styles.module.css

@@ -29,4 +29,11 @@
     width: var(--doc-sidebar-hidden-width);
     cursor: pointer;
   }
+
+  .sidebarViewport {
+    top: 0;
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+  }
 }

packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css

@@ -9,13 +9,9 @@
   .sidebar {
     display: flex;
     flex-direction: column;
-    max-height: 100vh;
     height: 100%;
-    position: sticky;
-    top: 0;
     padding-top: var(--ifm-navbar-height);
     width: var(--doc-sidebar-width);
-    transition: opacity 50ms ease;
   }
 
   .sidebarWithHideableNavbar {
@@ -24,8 +20,6 @@
 
   .sidebarHidden {
     opacity: 0;
-    height: 0;
-    overflow: hidden;
     visibility: hidden;
   }