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.
Props
| Prop | Type | Description |
|---|---|---|
header | SidebarHeaderData | — |
navGroups | SidebarNavGroup[] | — |
user | SidebarUser | — |
breadcrumb | SidebarBreadcrumbItem[] | — |
defaultCollapsed | boolean | — |
side | "left" | "right" | Which viewport edge the sidebar docks against. Defaults to "left". |
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
// shadcn/ui "sidebar-on-right" block (registry: sidebar-14). The standard
// docked app sidebar mirrored to the right viewport edge, with a flush
// full-bleed main content panel (upstream's Sidebar variant stays the
// "sidebar" default, not "inset") and a static (non-sticky) content header,
// with 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` option there is the only piece of shared logic this variant
// needed added.
import type { DomphyElement } from "@domphy/core";
import {
buildSidebarBlock,
DEFAULT_NAV_GROUPS_WITH_CHILDREN,
type SidebarBlockOptions,
} from "./sidebar01-04-shared.js";
/**
* Docked app sidebar mirrored to the right viewport edge, with a flush main
* content panel and a static (non-sticky) content header. 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: false,
stickyHeader: false,
manyContentRows: false,
});
}
export { sidebarOnRight };