Skip to content
Domphy

sidebar04

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

Props

PropTypeDescription
headerSidebarHeaderData
navGroupsSidebarNavGroup[]
userSidebarUser
breadcrumbSidebarBreadcrumbItem[]
defaultCollapsedboolean
side"left" | "right"Which viewport edge the sidebar docks against. Defaults to "left".
Implementation notes

Reuses sidebar03's parent/child nav-tree interaction model on a wider (themeSpacing(76) ~19rem vs ~16rem) floating aside: margin gap on top/left/bottom, rounded corners (borderRadius) and an outline+boxShadow border/shadow treatment instead of a flush edge + hairline border. Content header is non-sticky per spec (position). doctor diagnose() reports 0 issues; test asserts the floating card CSS (border-radius + margin) and the non-sticky header.

Status: ported · Reference: shadcn/ui original

// shadcn/ui "sidebar-04" block — Domphy reimplementation.
//
// Structurally identical to sidebar-03 (static docs identity header, a flat
// bold-link nav with always-visible sub-lists, a <SidebarRail/>, and NO footer)
// but rendered as a FLOATING inset card (upstream `Sidebar variant="floating"`)
// rather than a flush standard panel. Both variants share
// `buildDocsSidebarBlock()`; `floating: true` is the only difference.

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

// Upstream sidebar-04's sample nav: a single flat list of top-level sections,
// each with an always-visible sub-list. No group labels, no icons.
const DOCS_NAV: SidebarNavItem[] = [
  {
    label: "Getting Started",
    href: "#",
    children: [
      { label: "Installation", href: "#" },
      { label: "Project Structure", href: "#" },
    ],
  },
  {
    label: "Build Your Application",
    href: "#",
    children: [
      { label: "Routing", href: "#" },
      { label: "Data Fetching", href: "#", active: true },
      { label: "Rendering", href: "#" },
      { label: "Caching", href: "#" },
      { label: "Styling", href: "#" },
      { label: "Optimizing", href: "#" },
      { label: "Configuring", href: "#" },
      { label: "Testing", href: "#" },
      { label: "Authentication", href: "#" },
      { label: "Deploying", href: "#" },
      { label: "Upgrading", href: "#" },
      { label: "Examples", href: "#" },
    ],
  },
  {
    label: "API Reference",
    href: "#",
    children: [
      { label: "Components", href: "#" },
      { label: "File Conventions", href: "#" },
      { label: "Functions", href: "#" },
      { label: "next.config.js Options", href: "#" },
      { label: "CLI", href: "#" },
      { label: "Edge Runtime", href: "#" },
    ],
  },
  {
    label: "Architecture",
    href: "#",
    children: [
      { label: "Accessibility", href: "#" },
      { label: "Fast Refresh", href: "#" },
      { label: "Next.js Compiler", href: "#" },
      { label: "Supported Browsers", href: "#" },
      { label: "Turbopack", href: "#" },
    ],
  },
  {
    label: "Community",
    href: "#",
    children: [{ label: "Contribution Guide", href: "#" }],
  },
];

/**
 * Floating, inset docs sidebar (shadcn "sidebar-04"): a static docs identity
 * header, a flat bold-link nav with always-visible sub-lists, and no footer.
 * Call with no arguments for a fully working demo.
 */
function sidebar04(props: SidebarBlockOptions = {}): DomphyElement<"div"> {
  const navItems = props.navGroups
    ? props.navGroups.flatMap((group) => group.items)
    : DOCS_NAV;
  return buildDocsSidebarBlock({
    title: props.header?.workspaceName ?? "Documentation",
    subtitle: props.header?.workspacePlan ?? "v1.0.0",
    navItems,
    breadcrumb: props.breadcrumb ?? DEFAULT_BREADCRUMB,
    defaultCollapsed: props.defaultCollapsed,
    side: props.side,
    floating: true,
  });
}

export { sidebar04 };

← Back to shadcn/ui catalog