UI: Support disabling TOC & Sidebar

.changeset/two-carrots-raise.md

@@ -0,0 +1,5 @@
+---
+'next-docs-ui': patch
+---
+
+Support disabling TOC & Sidebar

packages/next-docs-ui/src/components/toc.tsx

@@ -6,11 +6,9 @@ import * as Primitive from 'next-docs-zeta/toc'
 export function TOC({ items }: { items: TOCItemType[] }) {
   return (
     <Primitive.TOCProvider toc={items} className="nd-overflow-hidden nd-flex-1">
-      {items.length > 0 && (
-        <h3 className="nd-inline-flex nd-flex-row nd-items-center nd-font-medium nd-text-sm nd-mb-4">
-          <TextIcon className="nd-inline nd-w-4 nd-h-4 nd-mr-2" /> On this page
-        </h3>
-      )}
+      <h3 className="nd-inline-flex nd-flex-row nd-items-center nd-font-medium nd-text-sm nd-mb-4">
+        <TextIcon className="nd-inline nd-w-4 nd-h-4 nd-mr-2" /> On this page
+      </h3>
       <div className="nd-flex nd-flex-col">
         {items.map((item, i) => (
           <TOCItem key={i} item={item} />

packages/next-docs-ui/src/layout.tsx

@@ -26,6 +26,11 @@ export type DocsLayoutProps = {
    */
   githubUrl?: string
 
+  /**
+   * Replace or disable sidebar
+   */
+  sidebar?: ReactNode | false
+
   sidebarBanner?: ReactNode
 
   sidebarContent?: ReactNode
@@ -43,25 +48,28 @@ export function DocsLayout(props: DocsLayoutProps) {
         }
       ]
     : []
+  const sidebar = props.sidebar ?? (
+    <Sidebar banner={props.sidebarBanner} items={props.tree}>
+      {props.sidebarContent}
+    </Sidebar>
+  )
+
+  const navbar = props.nav ?? (
+    <Nav links={links} enableSidebar={sidebar !== false}>
+      <Link
+        href="/"
+        className="nd-font-semibold hover:nd-text-muted-foreground"
+      >
+        {props.navTitle}
+      </Link>
+    </Nav>
+  )
 
   return (
     <PagesContext.Provider value={{ tree: props.tree }}>
-      {props.nav !== undefined ? (
-        props.nav
-      ) : (
-        <Nav links={links}>
-          <Link
-            href="/"
-            className="nd-font-semibold hover:nd-text-muted-foreground"
-          >
-            {props.navTitle}
-          </Link>
-        </Nav>
-      )}
+      {navbar}
       <div className="nd-flex nd-flex-row nd-container nd-max-w-[1300px] nd-gap-10">
-        <Sidebar banner={props.sidebarBanner} items={props.tree}>
-          {props.sidebarContent}
-        </Sidebar>
+        {sidebar}
         {props.children}
       </div>
     </PagesContext.Provider>

packages/next-docs-ui/src/page.tsx

@@ -8,7 +8,12 @@ import type { TableOfContents } from 'next-docs-zeta/server'
 import type { ReactNode } from 'react'
 
 export type DocsPageProps = {
-  toc: TableOfContents
+  toc?: TableOfContents
+
+  /**
+   * Replace or disable TOC (by passing false)
+   */
+  replaceToc?: ReactNode | false
 
   /**
    * Custom content in TOC container
@@ -19,6 +24,15 @@ export type DocsPageProps = {
 }
 
 export function DocsPage(props: DocsPageProps) {
+  const toc = props.replaceToc ?? (
+    <div className="nd-relative nd-w-[250px] max-xl:nd-hidden">
+      <div className="nd-sticky nd-flex nd-flex-col nd-top-16 nd-py-16 nd-max-h-[calc(100vh-4rem)]">
+        {props.toc && props.toc.length > 0 && <TOC items={props.toc} />}
+        {props.tocContent}
+      </div>
+    </div>
+  )
+
   return (
     <>
       <article className="nd-flex nd-flex-col nd-gap-6 nd-w-0 nd-flex-1 nd-py-8 md:nd-py-16">
@@ -28,12 +42,7 @@ export function DocsPage(props: DocsPageProps) {
           <Footer {...props.footer} />
         )}
       </article>
-      <div className="nd-relative nd-w-[250px] max-xl:nd-hidden">
-        <div className="nd-sticky nd-flex nd-flex-col nd-top-16 nd-py-16 nd-max-h-[calc(100vh-4rem)]">
-          <TOC items={props.toc} />
-          {props.tocContent}
-        </div>
-      </div>
+      {toc}
     </>
   )
 }