import * as React from "react"; import { Command, LifeBuoy, Rocket, Sparkles, Users } from "lucide-react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { DocsNavFoundationalLeftSidebarOne } from "@/registry/docs-nav-foundational-left-sidebar-one/docs-nav-foundational-left-sidebar-one"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof DocsNavFoundationalLeftSidebarOne >; const sections: ComponentProps["sections"] = [ { id: "foundations", title: "Product foundations", description: "Core concepts, account setup, and platform guardrails", icon: , defaultOpen: true, items: [ { id: "welcome", label: "Welcome to Nextbase", href: "#welcome", description: "Understand the platform architecture and key terminology.", status: "stable", shortcutHint: "1", }, { id: "workspaces", label: "Workspaces overview", href: "#workspaces", description: "Structure collaboration with role-based access and environments.", badge: { label: "New", tone: "brand" }, shortcutHint: "2", }, { id: "security", label: "Security posture", href: "#security", description: "Policies, audit logging, and compliance exports.", badge: { label: "SOC 2", variant: "outline" }, }, ], }, { id: "developers", title: "Developers", description: "API, CLI, and event-driven workflows", icon: , defaultOpen: true, items: [ { id: "quickstart", label: "API quickstart", href: "#quickstart", description: "Authenticate, create first integration, and ship within 10 minutes.", status: "beta", shortcutHint: "3", }, { id: "cli", label: "CLI automation", href: "#cli", description: "Script environment provisioning and batch operations.", badge: { label: "Updated", tone: "success" }, }, { id: "webhooks", label: "Webhook orchestration", href: "#webhooks", description: "Deliver resilient events with exponential backoff and replay tools.", status: "experimental", }, ], }, { id: "admins", title: "Admins & billing", description: "Access management, billing, and compliance", icon: , defaultOpen: false, items: [ { id: "roles", label: "Role directory", href: "#roles", description: "Map responsibilities to granular permissions.", }, { id: "billing", label: "Billing center", href: "#billing", description: "Track invoices, credits, and usage anomalies in one dashboard.", badge: { label: "Finance", variant: "secondary" }, }, { id: "compliance", label: "Compliance exports", href: "#compliance", description: "Generate localized reports with PII safeguards.", status: "stable", }, ], }, ]; const quickLinks: ComponentProps["quickLinks"] = [ { id: "changelog", label: "Changelog", description: "Releases, experiments, and heads-up notices", href: "https://usenextbase.com/changelog", icon: , }, { id: "support", label: "Get support", description: "Reach the triage desk or escalate a ticket", href: "https://usenextbase.com/support", icon: , variant: "outline", }, ]; export function DocsNavFoundationalLeftSidebarOneDemo() { const [activeItemId, setActiveItemId] = React.useState("welcome"); return ( setActiveItemId(item.id)} >

Getting started

Ship cohesive docs that empower every persona

This demo pairs the foundational left sidebar with fuzzy search and keyboard shortcuts. Use ` / ` to focus search, or `[` and `]` to cycle sections. The mobile sheet mirrors the experience for fast discovery on touch devices.

Welcome to Nextbase

Align your teams around one knowledge base with instant search, progressive disclosure, and persistent state. Content authors can group topics by persona, while readers rely on fuzzy discovery to find the right pathway.

Tip Accordion state persists across reloads, so returning builders always land where they left off.

API quickstart

Authenticate with personal access tokens or service accounts, then scaffold resources using the platform CLI. The docs nav keeps all related guides within reach while the content pane provides hands-on tutorials, callouts, and rich media embeds.

Admin and billing controls

Finance and operations teams get a dedicated space for billing, compliance exports, and role management. The active badge keeps everyone oriented, while search accelerates global navigation.

Need a hand? Head to the support quick link to escalate issues without leaving the page.

); } export default DocsNavFoundationalLeftSidebarOneDemo;

Simple