diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx index 22f89ad10..92a08e128 100644 --- a/docs/pages/_app.tsx +++ b/docs/pages/_app.tsx @@ -9,6 +9,12 @@ import type { AppProps } from 'next/app' import 'katex/dist/katex.min.css' import '../styles/globals.css' +const SIDEBAR_SCROLL_KEY = 'nextra-sidebar-scroll' + +function getSidebarScrollEl(): HTMLElement | null { + return document.querySelector('.nextra-sidebar-container .nextra-scrollbar') +} + // When a sidebar folder is expanded, scroll its submenu into view so the // newly revealed sub-pages are visible (Nextra doesn't do this by default, // which hides children of folders sitting at the bottom of the sidebar). @@ -35,8 +41,39 @@ function useSidebarAutoScroll() { }, []) } +// Nextra auto-scrolls the sidebar to center the active item on every page +// mount. For items near the bottom of a long sidebar (e.g. FOLD Token), +// this pushes them off-screen whenever the active page is near the top. +// Fix: save the scroll position before navigation and restore it after +// Nextra's scroll has run. +function useSidebarScrollMemory() { + useEffect(() => { + // Restore saved position after Nextra's scrollIntoView settles (2 rAF frames) + const saved = sessionStorage.getItem(SIDEBAR_SCROLL_KEY) + if (saved !== null) { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + const el = getSidebarScrollEl() + if (el) el.scrollTop = parseInt(saved, 10) + }) + }) + } + + // Save position when the user clicks a sidebar page link + const onLinkClick = (e: MouseEvent) => { + const anchor = (e.target as HTMLElement)?.closest('a') + if (!anchor?.closest('.nextra-sidebar-container')) return + const el = getSidebarScrollEl() + if (el) sessionStorage.setItem(SIDEBAR_SCROLL_KEY, String(el.scrollTop)) + } + document.addEventListener('click', onLinkClick, true) + return () => document.removeEventListener('click', onLinkClick, true) + }, []) +} + function App({ Component, pageProps }: AppProps) { useSidebarAutoScroll() + useSidebarScrollMemory() return ( <> diff --git a/docs/styles/globals.css b/docs/styles/globals.css index 20de6f2a6..be1bac947 100644 --- a/docs/styles/globals.css +++ b/docs/styles/globals.css @@ -11,10 +11,6 @@ body { background-color: #fffaf0; } -.nextra-content p, -.nextra-content li { - text-align: justify; -} .subheading-anchor { display: none;