Function MobileOnPageNav

packages/dev/s2-docs/src/Nav.tsx:394–438

({children})

}

export function MobileOnPageNav({children}) {
  let {currentPage} = useRouter();
  let [selected, setSelected] = useState('');
  useEffect(() => {
    let elements = Array.from(document.querySelectorAll('article [data-anchor-link]'));
    elements.reverse();
    let visible = new Set();
    let observer = new IntersectionObserver(
      entries => {
        for (let entry of entries) {
          if (entry.isIntersecting) {
            visible.add(entry.target);
          } else {
            visible.delete(entry.target);
          }
        }

        let lastVisible = elements.find(e => visible.has(e));
        if (lastVisible) {
          setSelected('#' + lastVisible.id!);
        } else {
          setSelected('#' + elements.at(-1)!.id);
        }
      },
      {
        rootMargin: '9999999px 0px -100% 0px',
        // @ts-ignore
        scrollMargin: '0px 0px 62px 0px',
        threshold: 0.5
      }
    );

    for (let element of elements) {
      observer.observe(element);
    }

    return () => observer.disconnect();
  }, [currentPage]);

  return (
    <Picker aria-label="Table of contents" value={selected} isQuiet size="L">
      {children}
    </Picker>
  );
}