properly reobserve the new page post-navigation so the page nav picker updates during scroll on mobile

this is because the page doesnt actually remount, we reuse the existing component tree

Author: LFDanLu

packages/dev/s2-docs/src/Layout.tsx

@@ -118,7 +118,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
             currentPage={currentPage}
-            toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
+            toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} currentPage={currentPage} />}
             nav={<MobileNav key="nav" pages={pages} currentPage={currentPage} />} />
           <div className={style({display: 'flex', width: 'full', marginTop: 12})}>
             <Nav pages={pages} currentPage={currentPage} />
@@ -200,9 +200,9 @@ function Toc({toc}) {
   );
 }
 
-function MobileToc({toc}) {
+function MobileToc({toc, currentPage}) {
   return (
-    <MobileOnPageNav>
+    <MobileOnPageNav currentPage={currentPage}>
       {renderMobileToc(toc)}
     </MobileOnPageNav>
   );

packages/dev/s2-docs/src/Nav.tsx

@@ -496,13 +496,11 @@ export function OnPageNav({children}) {
   );
 }
 
-export function MobileOnPageNav({children}) {
+export function MobileOnPageNav({children, currentPage}) {
   let [selected, setSelected] = useState('');
-
   useEffect(() => {
     let elements = Array.from(document.querySelectorAll('article > :is(h1,h2,h3,h4,h5)'));
     elements.reverse();
-
     let visible = new Set();
     let observer = new IntersectionObserver(entries => {
       for (let entry of entries) {
@@ -531,7 +529,7 @@ export function MobileOnPageNav({children}) {
     }
 
     return () => observer.disconnect();
-  }, []);
+  }, [currentPage]);
 
   return (
     <Picker aria-label="Table of contents" selectedKey={selected} isQuiet size="L">