sidebar01

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

Implementation notes

Full docked-sidebar shell: workspace switcher (popover+menu), grouped nav (list()/listItemButton()), pinned account footer (avatar+popover+menu), sticky content header (toggle+divider+breadcrumb), 3-tile+1-block content demo (skeleton()). Collapse-to-icon-rail is a real toState<boolean> driving width/label fade via themeSpacing/opacity transitions (200ms/150ms linear); ctrl/cmd+B wired via a document keydown listener in _onMount/_onRemove. Mobile breakpoint (<=767px) swaps to a real overlay drawer built from @domphy/ui's drawer() patch on a <dialog>, duplicating the same nav content. Omitted: literal letter-spacing on the uppercase group label (forbidden inline per doctor's inline-typography rule; no dedicated patch exposes it) and per-icon tooltips in icon-rail mode (tooltip() could be attached but was left off to keep the block a lean, literal tree — noted as the one interaction from the spec not wired). doctor diagnose() reports 0 issues on the rendered tree; shares packages/blocks/src/shadcn/sidebar/sidebar01-04-shared.ts with sidebar02-04.

Status: ported · Reference: shadcn/ui original

sidebar01

// shadcn/ui "sidebar-01" block — clean-room reimplementation.
//
// A left-docked application sidebar: workspace switcher header, nav split
// into labeled groups, pinned account footer, and a main content column with
// a sticky toggle+breadcrumb header. Collapses to an icon-only rail on
// desktop (ctrl/cmd+B or the toggle button) and becomes an overlay drawer on
// narrow viewports. See ./sidebar01-04-shared.ts for the reusable pieces.
//
// 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 with grouped nav, icon-rail collapse and a mobile
 * overlay drawer. Call with no arguments for a fully working demo.
 */
function sidebar01(props: SidebarBlockOptions = {}): DomphyElement<"div"> {
  return buildSidebarBlock({
    ...props,
    defaultNavGroups: DEFAULT_NAV_GROUPS,
    collapsibleSections: false,
    supportsChildren: false,
    floating: false,
    stickyHeader: true,
    manyContentRows: false,
  });
}

export { sidebar01 };

← Back to shadcn/ui catalog

sidebar01#

sidebar01