Fix sidebar getting clipped

palash-goel · Jul 10, 2023 · d7994ec · d7994ec
1 parent 6e2c82d
commit d7994ec
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 10 deletions.
diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -81,7 +81,6 @@ body {
 }
 .title_node_modules-\@docusaurus-theme-classic-lib-theme-BlogPostItem-Header-Title-styles-module {
   font-size: 32px !important;
-  border-top: 2px solid black;
 }
 
 .sidebarViewport_Xe31 {
@@ -1021,6 +1020,7 @@ button.DocSearch {
 
 .footer__link-item{
   line-height: inherit;
+  color: var(--docsearch-muted-color);
 }
 
 iframe {

diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
@@ -9,6 +9,7 @@
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
+  padding-bottom: 3.5rem;
 }
 
 @media (min-width: 997px) {

diff --git a/src/theme/DocSidebar/Desktop/Content/index.js b/src/theme/DocSidebar/Desktop/Content/index.js
@@ -35,7 +35,9 @@ export default function DocSidebarDesktopContent({path, sidebar, className}) {
         styles.menu,
         showAnnouncementBar && styles.menuWithAnnouncementBar,
         className,
-      )}>
+      )}
+      style={{paddingTop: '1.75rem', paddingBottom: '250px', overflowY: 'auto'}}
+    >
       <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
         <DocSidebarItems items={sidebar} activePath={path} level={1} />
       </ul>

diff --git a/src/theme/DocSidebar/Desktop/index.js b/src/theme/DocSidebar/Desktop/index.js
@@ -19,7 +19,9 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
         styles.sidebar,
         hideOnScroll && styles.sidebarWithHideableNavbar,
         isHidden && styles.sidebarHidden,
-      )}>
+      )}
+        style={{position: 'fixed'}}
+      >
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <div className={styles.sidebarSearchContainer}>
         <SearchBar />

diff --git a/src/theme/DocSidebar/Desktop/styles.module.css b/src/theme/DocSidebar/Desktop/styles.module.css
@@ -38,6 +38,6 @@
 
 .sidebarSearchContainer {
   margin-top: 2rem;
-  margin-bottom: 1.75rem;
+  /* margin-bottom: 1.75rem; */
   padding: 0 1rem;
 }
diff --git a/src/theme/Footer/Layout/index.js b/src/theme/Footer/Layout/index.js
@@ -18,7 +18,6 @@ export default function FooterLayout({style, links, logo, copyright}) {
         )}
         <div className={styles.links}>{links}</div>
       </div>
-      <ColorModeToggler />
     </footer>
   );
 }
diff --git a/src/theme/Footer/Layout/styles.module.css b/src/theme/Footer/Layout/styles.module.css
@@ -1,11 +1,14 @@
 .footer {
-  padding: 16px 24px;
-  background-color: transparent;
   border: 1px solid var(--click-color-stroke);
   display: flex;
   flex-direction: column-reverse;
   align-items: center;
   gap: 16px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: white;
+  height: 3.5rem;
 }
 
 .container {
@@ -24,15 +27,17 @@
 
 @media (min-width: 768px) {
   .footer {
-    padding: 32px 40px;
+    /* padding: 32px 40px; */
+    padding: 0;
     flex-direction: row;
+    color: var(--docsearch-muted-color);
   }
 
   .container {
     max-width: initial;
     padding: 0;
     flex-direction: row;
+    justify-content: space-between;
+    margin: 16px;
   }
-
 }
-