sidebar02

A Sidebar block/component from shadcn/ui — clean-room reimplemented for Domphy (see methodology). Call sidebar02() with no arguments for a working demo, or edit the code below live.

Implementation notes

Same shell as sidebar01, but each nav group is an independent <details>/<summary> disclosure (details() patch) with its own chevron rotation + max-height/opacity reveal, verified independent per section (not single-open accordion). Content pane swapped for 40 stacked skeleton() placeholder rows to demonstrate independent scroll under the pinned header, per spec. Same icon-rail/mobile-drawer behavior as sidebar01. Known simplification: when the sidebar is collapsed to icon-rail, a section that the user had manually closed stays closed (its icons hidden) rather than force-flattening to an all-icons rail — real shadcn's icon rail generally doesn't preserve nested disclosure semantics either, and reconciling the two independent collapse axes precisely was judged out of scope for a faithful-enough clean-room port. doctor diagnose() reports 0 issues.

Status: ported · Reference: shadcn/ui original

sidebar02

// shadcn/ui "sidebar-02" block — clean-room reimplementation.
//
// Same docked-sidebar chrome as sidebar-01, but each nav section header is
// itself a `<details>` disclosure: the section label + chevron toggle that
// group's item list open/closed independently of its siblings. The content
// pane is filled with many stacked placeholder rows to demonstrate scrolling
// independently under the pinned header. See ./sidebar01-04-shared.ts.
//
// Implemented purely from the block's public functional/visual spec — no
// upstream shadcn/ui source was viewed or copied.

import type { DomphyElement } from "@domphy/core";
import {
  DEFAULT_NAV_GROUPS,
  buildSidebarBlock,
  type SidebarBlockOptions,
} from "./sidebar01-04-shared.js";

/**
 * Docked app sidebar whose nav groups are individually collapsible
 * accordions. Call with no arguments for a fully working demo.
 */
function sidebar02(props: SidebarBlockOptions = {}): DomphyElement<"div"> {
  return buildSidebarBlock({
    ...props,
    defaultNavGroups: DEFAULT_NAV_GROUPS,
    collapsibleSections: true,
    supportsChildren: false,
    floating: false,
    stickyHeader: true,
    manyContentRows: true,
  });
}

export { sidebar02 };

← Back to shadcn/ui catalog

sidebar02#

sidebar02