fix: set dynamic announcementBar height on viewport in style (faceboo…

…k#8370)
sbeaury · Jan 20, 2023 · dc47e95 · dc47e95
1 parent 171fc65
commit dc47e95
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 7 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
 import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
@@ -15,13 +15,38 @@ import styles from './styles.module.css';
 
 export default function AnnouncementBar(): JSX.Element | null {
   const {announcementBar} = useThemeConfig();
-  const {isActive, close} = useAnnouncementBar();
+  const {isActive, close, setAnnouncementBarHeightOnViewport} =
+    useAnnouncementBar();
+
+  const {backgroundColor, textColor, isCloseable} = announcementBar!;
+  const announcementBarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (announcementBarRef.current) {
+        const {y, height} = announcementBarRef.current.getBoundingClientRect();
+        const scrollYPosition = -y;
+
+        const announcementBarHeightOnViewport =
+          height - scrollYPosition > 0 ? height + y : 0;
+        setAnnouncementBarHeightOnViewport(announcementBarHeightOnViewport);
+      }
+    };
+
+    document.addEventListener('scroll', handleScroll);
+
+    return () => {
+      document.removeEventListener('scroll', handleScroll);
+    };
+  }, [announcementBarRef, setAnnouncementBarHeightOnViewport]);
+
   if (!isActive) {
     return null;
   }
-  const {backgroundColor, textColor, isCloseable} = announcementBar!;
+
   return (
     <div
+      ref={announcementBarRef}
       className={styles.announcementBar}
       style={{backgroundColor, color: textColor}}
       role="banner">

diff --git a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx
@@ -8,7 +8,10 @@
 import React, {type ReactNode, useState, useCallback} from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+import {
+  useAnnouncementBar,
+  useDocsSidebar,
+} from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
 import DocSidebar from '@theme/DocSidebar';
 import ExpandButton from '@theme/DocRoot/Layout/Sidebar/ExpandButton';
@@ -34,6 +37,7 @@ export default function DocRootLayoutSidebar({
   setHiddenSidebarContainer,
 }: Props): JSX.Element {
   const {pathname} = useLocation();
+  const {announcementBarHeightOnViewport} = useAnnouncementBar();
 
   const [hiddenSidebar, setHiddenSidebar] = useState(false);
   const toggleSidebar = useCallback(() => {
@@ -64,7 +68,10 @@ export default function DocRootLayoutSidebar({
           className={clsx(
             styles.sidebarViewport,
             hiddenSidebar && styles.sidebarViewportHidden,
-          )}>
+          )}
+          style={{
+            maxHeight: `calc(100vh - ${announcementBarHeightOnViewport}px)`,
+          }}>
           <DocSidebar
             sidebar={sidebar}
             path={pathname}

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
@@ -34,6 +34,5 @@
     top: 0;
     position: sticky;
     height: 100%;
-    max-height: calc(100vh - var(--docusaurus-announcement-bar-height));
   }
 }
diff --git a/packages/docusaurus-theme-common/src/contexts/announcementBar.tsx b/packages/docusaurus-theme-common/src/contexts/announcementBar.tsx
@@ -39,13 +39,20 @@ type ContextValue = {
    * Callback fired when the user closes the announcement. Will be saved.
    */
   readonly close: () => void;
+  announcementBarHeightOnViewport: number;
+  setAnnouncementBarHeightOnViewport: (height: number) => void;
 };
 
 const Context = React.createContext<ContextValue | null>(null);
 
 function useContextValue(): ContextValue {
   const {announcementBar} = useThemeConfig();
   const isBrowser = useIsBrowser();
+  const initialHeightOnViewport = Number(
+    getComputedStyle(document.documentElement)
+      .getPropertyValue('--docusaurus-announcement-bar-height')
+      .replace('px', ''),
+  );
 
   const [isClosed, setClosed] = useState(() =>
     isBrowser
@@ -54,6 +61,11 @@ function useContextValue(): ContextValue {
       : // On server/hydration: always visible to prevent layout shifts (will be hidden with css if needed)
         false,
   );
+
+  const [heightOnViewport, setHeightOnViewport] = useState(
+    initialHeightOnViewport,
+  );
+
   // Update state after hydration
   useEffect(() => {
     setClosed(isDismissedInStorage());
@@ -64,6 +76,10 @@ function useContextValue(): ContextValue {
     setClosed(true);
   }, []);
 
+  const setAnnouncementBarHeightOnViewport = useCallback((height: number) => {
+    setHeightOnViewport(height);
+  }, []);
+
   useEffect(() => {
     if (!announcementBar) {
       return;
@@ -96,8 +112,16 @@ function useContextValue(): ContextValue {
     () => ({
       isActive: !!announcementBar && !isClosed,
       close: handleClose,
+      announcementBarHeightOnViewport: heightOnViewport,
+      setAnnouncementBarHeightOnViewport,
     }),
-    [announcementBar, isClosed, handleClose],
+    [
+      announcementBar,
+      isClosed,
+      handleClose,
+      heightOnViewport,
+      setAnnouncementBarHeightOnViewport,
+    ],
   );
 }