sidebarOnRight

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

Implementation notes

Thin wrapper over the existing sidebar01-04 family's buildSidebarBlock(), extended (not forked) with new optional side/insetMain options — kept as the family's single source of truth rather than duplicating ~250 lines of shared nav/collapse/drawer code. Defaults preserve byte-identical output for sidebar01-04 (all 14 pre-existing tests still pass; verified before and after). side:'right' mirrors the docked edge, border/margin edges, mobile off-canvas transform direction and drawer() placement; the header toggle is pushed to the header's right edge via a toolbarSpacer(). insetMain:true reuses sidebar08's rounded/shadowed inset-card treatment with the same collapse-synced margin transition. The nested per-item <details> sub-link accordion is reused as-is from the family's supportsChildren nav renderer even though the spec's behavior text says nav groups have 'no per-item collapse' — the spec's own researchNote explicitly deprioritizes that literal detail in favor of reusing 'standard sidebar chrome shared with other variants in the family,' so this is a deliberate interpretation, called out for transparency. Factory accepts side:'left' to fall back to the family's standard left-docked layout (tested).

Status: ported · Reference: shadcn/ui original

sidebarOnRight

// shadcn/ui "sidebar-on-right" block — clean-room reimplementation from the
// public behavior/visual spec only (no upstream source viewed). The standard
// docked app sidebar mirrored to the right viewport edge, with the main
// content column rendered as a rounded/shadowed inset card (sidebar08-style)
// instead of a flush full-bleed panel, and the header's collapse toggle
// pushed to the header's right edge, adjacent to the sidebar. Shares its nav
// tree, collapse mechanics and mobile drawer with the rest of the sidebar-0N
// family via ./sidebar01-04-shared.ts — the `side`/`insetMain` options there
// are the only pieces of shared logic this variant needed added.
//
// 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_WITH_CHILDREN,
  buildSidebarBlock,
  type SidebarBlockOptions,
} from "./sidebar01-04-shared.js";

/**
 * Docked app sidebar mirrored to the right viewport edge, with an inset main
 * content card and the collapse toggle on the header's right edge. Pass
 * `side: "left"` to fall back to the family's standard left-docked layout.
 * Call with no arguments for a fully working demo.
 */
function sidebarOnRight(props: SidebarBlockOptions = {}): DomphyElement<"div"> {
  return buildSidebarBlock({
    ...props,
    side: props.side ?? "right",
    defaultNavGroups: DEFAULT_NAV_GROUPS_WITH_CHILDREN,
    collapsibleSections: false,
    supportsChildren: true,
    floating: false,
    insetMain: true,
    stickyHeader: true,
    manyContentRows: false,
  });
}

export { sidebarOnRight };

← Back to shadcn/ui catalog

sidebarOnRight#

sidebarOnRight