3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 18:27:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Danny Kim 2022-11-24 08:49:28 -05:00 • committed by GitHub
parent 6be3beb8c9
commit 1bf058979e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;

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

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

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

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

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

@ -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;
}