🫳 Adjust PrimarySideBar downwards when banner is visible (jupyter-book#683)

Co-authored-by: Chris Holdgraf <[email protected]>

Author: stefanv

.changeset/warm-rockets-push.md

@@ -0,0 +1,9 @@
+---
+'@myst-theme/providers': patch
+'@myst-theme/site': patch
+'@myst-theme/book': patch
+---
+
+Adjust the primary sidebar height and positioning when banner is displayed.
+
+Also expose the banner state for other components to use.

packages/providers/src/banner.tsx

@@ -0,0 +1,39 @@
+// Context to provide the visibility and height of the top banner,
+// and a mechanism to set it from within the Banner upon redraw.
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+
+type BannerState = {
+  visible?: boolean;
+  height: number;
+};
+
+type BannerContextValue = {
+  bannerState: BannerState;
+  setBannerState: Dispatch<SetStateAction<BannerState>>;
+};
+
+const BannerStateContext = createContext<BannerContextValue | undefined>(undefined);
+
+export function BannerStateProvider({ children }: { children: React.ReactNode }) {
+  const [bannerState, setBannerState] = useState<BannerState>({ visible: undefined, height: 0 });
+
+  const value = useMemo(() => ({ bannerState, setBannerState }), [bannerState]);
+
+  return <BannerStateContext.Provider value={value}>{children}</BannerStateContext.Provider>;
+}
+
+export function useBannerState() {
+  const ctx = useContext(BannerStateContext);
+  if (!ctx) {
+    throw new Error('useBannerState must be used from within BannerStateProvider');
+  }
+  return ctx;
+}

packages/providers/src/index.tsx

@@ -10,3 +10,4 @@ export * from './tabs.js';
 export * from './xref.js';
 export * from './renderers.js';
 export * from './project.js';
+export * from './banner.js';

packages/site/src/components/Navigation/PrimarySidebar.tsx

@@ -9,6 +9,7 @@ import {
   useIsWide,
   useBaseurl,
   withBaseurl,
+  useBannerState,
 } from '@myst-theme/providers';
 import type { Heading } from '@myst-theme/common';
 import { Toc } from './TableOfContentsItems.js';
@@ -103,15 +104,18 @@ export function useSidebarHeight<T extends HTMLElement = HTMLElement>(top = 0, i
   const toc = useRef<HTMLDivElement>(null);
   const transitionState = useNavigation().state;
   const wide = useIsWide();
+  const { bannerState } = useBannerState();
+  const totalTop = top + bannerState.height;
+
   const setHeight = () => {
     if (!container.current || !toc.current) return;
     const height = container.current.offsetHeight - window.scrollY;
     const div = toc.current.firstChild as HTMLDivElement;
     if (div)
       div.style.height = wide
-        ? `min(calc(100vh - ${top}px), ${height + inset}px)`
-        : `calc(100vh - ${top}px)`;
-    if (div) div.style.height = `min(calc(100vh - ${top}px), ${height + inset}px)`;
+        ? `min(calc(100vh - ${totalTop}px), ${height + inset}px)`
+        : `calc(100vh - ${totalTop}px)`;
+    if (div) div.style.height = `min(calc(100vh - ${totalTop}px), ${height + inset}px)`;
     const nav = toc.current.querySelector('nav');
     if (nav) nav.style.opacity = height > 150 ? '1' : '0';
   };
@@ -123,7 +127,7 @@ export function useSidebarHeight<T extends HTMLElement = HTMLElement>(top = 0, i
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [container, toc, transitionState, wide]);
+  }, [container, toc, transitionState, wide, totalTop]);
   return { container, toc };
 }
 
@@ -143,6 +147,7 @@ export const PrimarySidebar = ({
   mobileOnly?: boolean;
 }) => {
   const top = useThemeTop();
+  const { bannerState } = useBannerState();
   const grid = useGridSystemProvider();
   const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
@@ -168,7 +173,7 @@ export const PrimarySidebar = ({
         { 'lg:hidden': nav && hide_toc },
         { hidden: !open, 'z-30': open, 'z-10': !open },
       )}
-      style={{ top }}
+      style={{ top: top + bannerState.height }}
     >
       <div
         className={classNames(

themes/book/app/components/Banner.tsx

@@ -1,9 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { MyST } from 'myst-to-react';
 import classNames from 'classnames';
 import type { GenericParent } from 'myst-common';
 import { hashString } from '~/utils/hash';
 import { XMarkIcon } from '@heroicons/react/24/solid';
+import { useBannerState } from '@myst-theme/providers';
 
 /**
  * A dismissible banner component at the top that shows content passed as a MyST AST.
@@ -13,24 +14,34 @@ export function Banner({ content, className }: { content: GenericParent; classNa
   const contentString = JSON.stringify(content);
   const bannerId = hashString(contentString);
 
-  // Start hidden, only show after checking localStorage on client
-  // This avoids flickering on initial load
-  const [isVisible, setIsVisible] = useState(false);
+  // Start hidden, only show after checking localStorage on client.
+  // This avoids flickering on initial load.
+  const { bannerState, setBannerState } = useBannerState();
 
-  // Check dismissal state on client side only
+  const ref = useRef<HTMLElement | null>(null);
+
+  // Check dismissal state on client side
   // If the banner content changes, the ID will be different and it'll show again
   useEffect(() => {
+    const el = ref.current;
+
     const dismissed = localStorage.getItem(`myst-dismissed-banner-${bannerId}`) === 'true';
-    setIsVisible(!dismissed);
-  }, [bannerId]);
+    setBannerState({
+      visible: !dismissed,
+      height: el ? el.getBoundingClientRect().height : 0,
+    });
+  }, [bannerId, bannerState.visible]);
 
   const handleDismiss = () => {
     localStorage.setItem(`myst-dismissed-banner-${bannerId}`, 'true');
-    setIsVisible(false);
+    setBannerState({
+      visible: false,
+      height: 0,
+    });
   };
 
   // Don't render if not visible
-  if (!isVisible) return null;
+  if (!bannerState.visible) return null;
 
   // Should be styled similarly to the footer
   return (
@@ -42,6 +53,7 @@ export function Banner({ content, className }: { content: GenericParent; classNa
         'relative z-40',
         className,
       )}
+      ref={ref}
     >
       <div className="max-w-screen-lg mx-auto flex items-center gap-4">
         {/* Banner content */}

themes/book/app/routes/$.tsx

@@ -25,6 +25,7 @@ import {
   useSiteManifest,
   useThemeTop,
   ProjectProvider,
+  BannerStateProvider,
 } from '@myst-theme/providers';
 import { ComputeOptionsProvider, ThebeLoaderAndServer } from '@myst-theme/jupyter';
 import { MadeWithMyst } from '@myst-theme/icons';
@@ -139,13 +140,15 @@ export function ArticlePageAndNavigation({
 }) {
   return (
     <UiStateProvider>
-      <ArticlePageAndNavigationInternal
-        children={children}
-        hide_toc={hide_toc}
-        hideSearch={hideSearch}
-        projectSlug={projectSlug}
-        inset={inset}
-      />
+      <BannerStateProvider>
+        <ArticlePageAndNavigationInternal
+          children={children}
+          hide_toc={hide_toc}
+          hideSearch={hideSearch}
+          projectSlug={projectSlug}
+          inset={inset}
+        />
+      </BannerStateProvider>
     </UiStateProvider>
   );
 }