Function OptimisticToc

packages/dev/s2-docs/src/OptimisticToc.tsx:62–113

()

}

export function OptimisticToc() {
  let {currentPage} = useRouter();
  let section = currentPage.exports?.section;
  let hasToC =
    (!currentPage.exports?.hideNav || section === 'Blog' || section === 'Releases') &&
    currentPage.tableOfContents?.[0]?.children &&
    currentPage.tableOfContents?.[0]?.children?.length > 0;
  if (!hasToC) {
    return null;
  }

  return (
    <aside
      className={style({
        position: 'sticky',
        top: 0,
        paddingTop: 32,
        marginBottom: -40,
        boxSizing: 'border-box',
        width: 180,
        flexShrink: 0,
        display: {
          default: 'none',
          lg: 'flex'
        },
        flexDirection: 'column'
      })}>
      <div
        className={style({
          font: 'title',
          minHeight: 32,
          paddingX: 12,
          display: 'flex',
          alignItems: 'center',
          marginBottom: 4,
          flexShrink: 0
        })}>
        On this page
      </div>
      <ScrollableToc>
        <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} key={currentPage.url} />
        {currentPage.exports?.relatedPages && (
          <RelatedPages pages={currentPage.exports.relatedPages} />
        )}
      </ScrollableToc>
      <div className={style({flexShrink: 0})}>
        <Divider size="S" styles={style({marginY: 12})} />
        <MarkdownMenu name={currentPage.name} url={currentPage.url} />
      </div>
    </aside>
  );
}

function isExternalUrl(url: string): boolean {
  return url.startsWith('http://') || url.startsWith('https://');