fixes docSideBar overlapping display issues

facebook · May 10, 2023 · 7131a6f · 7131a6f
1 parent af9a4f2
commit 7131a6f
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 38 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/styles.module.css
@@ -33,7 +33,7 @@
   .sidebarViewport {
     top: 0;
     position: sticky;
-    height: 100%;
-    max-height: 100vh;
+    min-height: 277px;
+    height: 100vh;
   }
 }
diff --git a/...es/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css b/...es/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
@@ -20,7 +20,6 @@
     display: block !important;
     background-color: var(--docusaurus-collapse-button-bg);
     height: 40px;
-    position: sticky;
     bottom: 0;
     border-radius: 0;
     border: 1px solid var(--ifm-toc-border-color);

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/index.tsx
@@ -5,54 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import {
-  useAnnouncementBar,
-  useScrollPosition,
-} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import type {Props} from '@theme/DocSidebar/Desktop/Content';
 
 import styles from './styles.module.css';
 
-function useShowAnnouncementBar() {
-  const {isActive} = useAnnouncementBar();
-  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
-
-  useScrollPosition(
-    ({scrollY}) => {
-      if (isActive) {
-        setShowAnnouncementBar(scrollY === 0);
-      }
-    },
-    [isActive],
-  );
-  return isActive && showAnnouncementBar;
-}
-
 export default function DocSidebarDesktopContent({
   path,
   sidebar,
   className,
 }: Props): JSX.Element {
-  const showAnnouncementBar = useShowAnnouncementBar();
-
   return (
     <nav
       aria-label={translate({
         id: 'theme.docs.sidebar.navAriaLabel',
         message: 'Docs sidebar',
         description: 'The ARIA label for the sidebar navigation',
       })}
-      className={clsx(
-        'menu thin-scrollbar',
-        styles.menu,
-        showAnnouncementBar && styles.menuWithAnnouncementBar,
-        className,
-      )}>
+      className={clsx('menu thin-scrollbar', styles.menu, className)}>
       <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
         <DocSidebarItems items={sidebar} activePath={path} level={1} />
       </ul>

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/styles.module.css
@@ -16,8 +16,4 @@
       scrollbar-gutter: stable;
     }
   }
-
-  .menuWithAnnouncementBar {
-    margin-bottom: var(--docusaurus-announcement-bar-height);
-  }
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx
@@ -5,16 +5,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+  useAnnouncementBar,
+  useScrollPosition,
+} from '@docusaurus/theme-common/internal';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
 import type {Props} from '@theme/DocSidebar/Desktop';
 
 import styles from './styles.module.css';
 
+function useShowAnnouncementBar() {
+  const {isActive} = useAnnouncementBar();
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState({
+    isActive,
+    height: 0,
+  });
+
+  useScrollPosition(
+    ({scrollY}) => {
+      if (isActive) {
+        setShowAnnouncementBar({isActive: true, height: 30 - scrollY});
+      } else {
+        setShowAnnouncementBar({isActive: false, height: 0});
+      }
+    },
+    [isActive],
+  );
+
+  return showAnnouncementBar;
+}
+
 function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
   const {
     navbar: {hideOnScroll},
@@ -23,13 +48,23 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
     },
   } = useThemeConfig();
 
+  const showAnnouncementBar = useShowAnnouncementBar();
+
   return (
     <div
       className={clsx(
         styles.sidebar,
         hideOnScroll && styles.sidebarWithHideableNavbar,
         isHidden && styles.sidebarHidden,
-      )}>
+      )}
+      style={{
+        height:
+          showAnnouncementBar.isActive &&
+          showAnnouncementBar.height > 0 &&
+          showAnnouncementBar.height <= 30
+            ? `calc(100% - ${showAnnouncementBar.height}px)`
+            : '100%',
+      }}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <Content path={path} sidebar={sidebar} />
       {hideable && <CollapseButton onClick={onCollapse} />}

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css
@@ -9,7 +9,6 @@
   .sidebar {
     display: flex;
     flex-direction: column;
-    height: 100%;
     padding-top: var(--ifm-navbar-height);
     width: var(--doc-sidebar-width);
   }