## Usage `` claims the right column of the docs page sidebar, replacing the default "On this page" TOC with content of your choosing. Use it on API endpoint pages to show request/response examples next to the prose: ```mdx ## `/v1/projects` Create a new documentation project under the authenticated organization. The slug must be unique within your account. ```bash cURL curl -X POST https://api.codivdocs.com/v1/projects \ -H "Authorization: Bearer $TOKEN" \ -d '{"name": "My Docs"}' ``` ``` When the reader opens the page on a wide screen (`xl+`), the panel sticks to the right next to the prose. On smaller screens it falls back inline below the content. ## How the right column works CodivDocs pages have an automatic right column that shows the "On this page" table of contents by default. When at least one `` is mounted on the page, the right column **automatically switches** to panel mode and the TOC is hidden. This means: - **No `` on the page** → reader sees the TOC - **One or more `` on the page** → reader sees the panels (TOC hidden) There is no manual "use TOC" or "use Panel" toggle — adding a `` is the toggle. ## Multiple panels You can stack several panels in a single page. They render in document order: ```mdx ... ## Authentication Bearer token in the `Authorization` header. ... ``` The first panel shows up at the top of the right column; subsequent panels stack below it. ## Without a title The `title` prop is optional — omit it for a borderless content block: ```mdx ... ``` ## When to use Panel vs inline | | Panel (right column) | Inline content | |---|---|---| | **Best for** | Reference material that should always be visible while reading | Step-by-step content the reader follows top-to-bottom | | **API pages** | Sample request/response | Authentication intro, prose explanation | | **Tutorials** | Cheat sheet, env vars list | Step-by-step instructions | | **Mobile** | Falls back inline | Native flow | ## When NOT to use - **TOC-only pages**: don't add an empty `` just to hide the TOC. If you don't want the TOC, just don't write h2/h3 headings. - **Long-form content**: panels are sticky-friendly, so they should fit within ~80vh. For longer reference material, use a regular section in the page body. ## Props | Prop | Type | Required | Description | |------|------|----------|-------------| | `title` | `string` | No | Eyebrow header rendered above the panel content | | `children` | `ReactNode` | Yes | Panel body — typically RequestExample, ResponseExample, code block, or short prose | ## Implementation notes `` is a client component that portals its content into a hidden host div in the page layout. The host always exists in the DOM so panels can mount into it; it just toggles visibility based on whether any children are present. A `MutationObserver` in `` watches the host and switches between TOC and panel modes accordingly.