Sidebar

"use client"import * as React from "react"import { Button } from "@/components/ui/button"import { Sidebar, SidebarGroup, SidebarHead, SidebarLink, type SidebarProps } from "@/components/ui/sidebar"// Folded, pointing at a tick names it and shows its line.const pages = {Work: { Projects: "Seven of them, three live.", Clients: "Who we work for, and since when.", Journal: "What the studio writes down." },"II Studio": { People: "Nine, and a dog.", Settings: "Hours, billing and who can sign in." },}type Variant = NonNullable<SidebarProps["variant"]>const variants: Variant[] = ["words", "chapter", "numerals"]export default function Example() {const [current, setCurrent] = React.useState("Projects")const [folded, setFolded] = React.useState(false)const [variant, setVariant] = React.useState<Variant>("words")return (<div className="grid gap-10 min-[860px]:grid-cols-[auto_minmax(0,1fr)]"><Sidebar id="studio-app" label="Studio app" sheetLabel="Studio" folded={folded} variant={variant}><SidebarHead>Halden Studio</SidebarHead>{Object.entries(pages).map(([group, names]) => (<SidebarGroup key={group} label={group}>{Object.entries(names).map(([name, line]) => (<SidebarLinkkey={name}href={`#${name.toLowerCase()}`}current={name === current}preview={line}onClick={(e) => {e.preventDefault()setCurrent(name)}}>{name}</SidebarLink>))}</SidebarGroup>))}</Sidebar><div className="grid content-start justify-items-start gap-4"><div role="group" aria-label="Sidebar variant" className="flex flex-wrap gap-x-6 gap-y-2">{variants.map((v) => (<Button key={v} variant="quiet" aria-pressed={v === variant} disabled={folded} onClick={() => setVariant(v)}>{v[0].toUpperCase() + v.slice(1)}</Button>))}</div><Button variant="quiet" aria-expanded={!folded} aria-controls="studio-app" onClick={() => setFolded((f) => !f)}>{folded ? "Unfold the sidebar" : "Fold the sidebar"}</Button><p className="ot-mf">{current}</p><p>Seven projects, three of them live. Choose a page on the left, or fold the column to a ruler and point at a tick.</p></div></div>)}