🔧 Fix positioning of secondary sidebar when scrolling (#417)

* fix: positioning of secondary sidebar * chore: add changeset * 📐align to top content, leave room at top on scroll * 📏 position tweaks * ✨ 2px --------- Co-authored-by: stevejpurves <[email protected]>
jupyter-book · Jul 3, 2024 · 6309593 · 6309593
1 parent de79758
commit 6309593
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/.changeset/afraid-plants-kiss.md b/.changeset/afraid-plants-kiss.md
@@ -0,0 +1,6 @@
+---
+'@myst-theme/article': patch
+'@myst-theme/book': patch
+---
+
+Fix position of secondary sidebar during scrolling
diff --git a/themes/article/app/components/Article.tsx b/themes/article/app/components/Article.tsx
@@ -11,12 +11,14 @@ import {
 } from '@myst-theme/site';
 import { ErrorTray, NotebookToolbar, useComputeOptions } from '@myst-theme/jupyter';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
-import { ReferencesProvider } from '@myst-theme/providers';
+import { ReferencesProvider, useThemeTop } from '@myst-theme/providers';
 import type { GenericParent } from 'myst-common';
 import { copyNode } from 'myst-common';
 import { BusyScopeProvider, ConnectionStatusTray, ExecuteScopeProvider } from '@myst-theme/jupyter';
 import { SourceFileKind } from 'myst-spec-ext';
 
+const TOP_OFFSET = 24;
+
 export function Article({
   article,
   hideKeywords,
@@ -35,6 +37,7 @@ export function Article({
   const parts = extractKnownParts(tree);
   const { title, subtitle } = article.frontmatter;
   const compute = useComputeOptions();
+  const top = useThemeTop();
 
   return (
     <ReferencesProvider
@@ -45,8 +48,11 @@ export function Article({
         <ExecuteScopeProvider enable={compute?.enabled ?? false} contents={article}>
           {!hideTitle && <FrontmatterBlock frontmatter={{ title, subtitle }} className="mb-5" />}
           {!hideOutline && (
-            <div className="block my-10 lg:sticky lg:top-0 lg:z-10 lg:h-0 lg:pt-2 lg:my-0 lg:ml-10 lg:col-margin-right">
-              <DocumentOutline className="relative" maxdepth={outlineMaxDepth}>
+            <div
+              className="block my-10 lg:sticky lg:top-0 lg:z-10 lg:h-0 lg:pt-0 lg:my-0 lg:ml-10 lg:col-margin-right"
+              style={{ top: top + TOP_OFFSET }}
+            >
+              <DocumentOutline className="relative pt-[2px]" maxdepth={outlineMaxDepth}>
                 <SupportingDocuments />
               </DocumentOutline>
             </div>

diff --git a/themes/book/app/components/ArticlePage.tsx b/themes/book/app/components/ArticlePage.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { ReferencesProvider, useProjectManifest, useSiteManifest } from '@myst-theme/providers';
+import {
+  ReferencesProvider,
+  useProjectManifest,
+  useSiteManifest,
+  useThemeTop,
+} from '@myst-theme/providers';
 import {
   Bibliography,
   ContentBlocks,
@@ -9,6 +14,7 @@ import {
   DocumentOutline,
   extractKnownParts,
   Footnotes,
+  DEFAULT_NAV_HEIGHT,
 } from '@myst-theme/site';
 import type { SiteManifest } from 'myst-config';
 import type { PageLoader } from '@myst-theme/common';
@@ -43,6 +49,8 @@ function combineDownloads(
   return pageFrontmatter.exports;
 }
 
+const TOP_OFFSET = 33;
+
 export const ArticlePage = React.memo(function ({
   article,
   hide_all_footer_links,
@@ -54,6 +62,7 @@ export const ArticlePage = React.memo(function ({
 }) {
   const manifest = useProjectManifest();
   const compute = useComputeOptions();
+  const top = useThemeTop();
 
   const pageDesign: TemplateOptions = (article.frontmatter as any)?.options ?? {};
   const siteDesign: TemplateOptions =
@@ -82,7 +91,10 @@ export const ArticlePage = React.memo(function ({
             />
           )}
           {!hide_outline && (
-            <div className="block my-10 lg:sticky lg:top-0 lg:z-10 lg:h-0 lg:pt-2 lg:my-0 lg:ml-10 lg:col-margin-right">
+            <div
+              className="block my-10 lg:sticky lg:top-0 lg:z-10 lg:h-0 lg:pt-0 lg:my-0 lg:ml-10 lg:col-margin-right"
+              style={{ top: top + TOP_OFFSET }}
+            >
               <DocumentOutline className="relative" maxdepth={outline_maxdepth} />
             </div>
           )}