Sidebar and canvas

Persistent navigation across many dashboards without stealing the canvas. A sidebar earns its 240px by showing where you are in a set of fifty, and stops earning it the moment the set is six.

npx shadcn@latest add scroll-area button
npm i lucide-react

Tokens this needs: --card, --foreground, --muted, --muted-foreground, --border, --chart-1

────────────────────────────────────────────────────────────────────────
// Shell.tsx
────────────────────────────────────────────────────────────────────────

import { useState, type ReactNode } from "react";
import { Menu, PanelLeftClose } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

export type NavItem = { id: string; label: string };
export type NavSection = { label: string; items: NavItem[] };

/**
 * A rail and a canvas. The rail is narrow, always present, and scrolls on
 * its own rather than with the page. It highlights the current item, which
 * is the whole reason it earns its width: "where am I" answered continuously,
 * for someone who arrived from an alert link and has no idea what else exists.
 *
 * Two things are decided here rather than discovered later. Collapse reclaims
 * the width on a dense page. Below the breakpoint the rail hides, and the menu
 * button that replaces it opens the same list, so the narrow layout still has
 * a route everywhere.
 */
export function Shell({ workspace, sections, current, onNavigate, children, railWidth = 240 }: {
  workspace: string;
  sections: NavSection[];
  /** The id of the item the canvas is showing. Required: a rail without a
   *  current position is a list of links, and a breadcrumb does that. */
  current: string;
  onNavigate: (id: string) => void;
  children: ReactNode;
  railWidth?: number;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const [open, setOpen] = useState(false); // the narrow layout's overlay

  const rail = (
    <nav aria-label="Dashboards" className="flex h-full flex-col">
      <div className="flex items-center justify-between px-3 py-2">
        <span className="truncate text-sm font-medium">{workspace}</span>
        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 md:inline-flex hidden" aria-label="Collapse the rail" onClick={() => setCollapsed(true)}>
          <PanelLeftClose />
        </Button>
      </div>
      <ScrollArea className="flex-1">
        {sections.map((s) => (
          <div key={s.label} className="px-1.5 pb-2">
            <p className="px-1.5 pt-2 pb-1 text-[11px] uppercase tracking-wide text-muted-foreground">{s.label}</p>
            {s.items.map((it) => (
              <button
                key={it.id}
                type="button"
                aria-current={it.id === current ? "page" : undefined}
                onClick={() => { onNavigate(it.id); setOpen(false); }}
                title={it.label}
                className={cn(
                  "block w-full truncate rounded px-1.5 py-1 text-left text-xs",
                  it.id === current ? "bg-chart-1/20 text-foreground" : "text-muted-foreground hover:bg-muted",
                )}
              >
                {it.label}
              </button>
            ))}
          </div>
        ))}
      </ScrollArea>
    </nav>
  );

  return (
    <div className="flex h-[260px] overflow-hidden rounded-lg border bg-card">
      {/* Wide: the rail is a column. It never scrolls with the canvas. */}
      {!collapsed && (
        <aside className="hidden shrink-0 border-r md:block" style={{ width: railWidth }}>{rail}</aside>
      )}

      <div className="relative flex min-w-0 flex-1 flex-col">
        <div className="flex items-center gap-1 border-b px-2 py-1">
          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 md:hidden" aria-label="Open navigation" onClick={() => setOpen(true)}>
            <Menu />
          </Button>
          {collapsed && (
            <Button variant="ghost" size="sm" className="hidden h-7 w-7 p-0 md:inline-flex" aria-label="Expand the rail" onClick={() => setCollapsed(false)}>
              <Menu />
            </Button>
          )}
          <span className="truncate text-xs text-muted-foreground">
            {sections.flatMap((s) => s.items).find((it) => it.id === current)?.label}
          </span>
        </div>
        <ScrollArea className="flex-1 p-3">{children}</ScrollArea>

        {/* Narrow: the same list, as an overlay the menu button opens. */}
        {open && (
          <aside className="absolute inset-y-0 left-0 z-10 w-[240px] border-r bg-card shadow-md md:hidden">
            <Button variant="ghost" size="sm" className="absolute right-1 top-1 h-7 w-7 p-0" aria-label="Close navigation" onClick={() => setOpen(false)}>
              <PanelLeftClose />
            </Button>
            {rail}
          </aside>
        )}
      </div>
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { Shell, type NavSection } from "./Shell";

/**
 * Two sections in the rail, checkout as the current position, and three
 * panels of requests per second on the canvas. Narrow the window and the
 * rail becomes a menu button that opens the same list.
 */
const SECTIONS: NavSection[] = [
  { label: "Services", items: [
    { id: "gateway", label: "API gateway" },
    { id: "checkout", label: "Checkout" },
    { id: "search", label: "Search" },
    { id: "cart", label: "Cart" },
    { id: "users", label: "Users" },
    { id: "feed", label: "Feed" },
  ] },
  { label: "Infrastructure", items: [
    { id: "k8s", label: "Kubernetes" },
    { id: "postgres", label: "Postgres" },
    { id: "redis", label: "Redis" },
    { id: "cdn", label: "CDN" },
  ] },
];

const PANELS = [
  { title: "Requests per second", values: [220, 236, 226, 268, 258, 292, 312] },
  { title: "p95 latency, ms", values: [180, 172, 190, 168, 175, 162, 158] },
  { title: "Error rate", values: [1.2, 1.1, 1.4, 0.9, 1.0, 0.8, 0.7] },
];

const Spark = ({ values }: { values: number[] }) => {
  const max = Math.max(...values), min = Math.min(...values);
  const pts = values.map((v, i) => `${(i / (values.length - 1)) * 120},${28 - ((v - min) / (max - min || 1)) * 24}`);
  return (
    <svg viewBox="0 0 120 32" className="mt-2 h-8 w-full" aria-hidden="true">
      <polyline points={pts.join(" ")} fill="none" className="stroke-chart-1" strokeWidth={1.5} />
    </svg>
  );
};

export default function Demo() {
  const [current, setCurrent] = useState("checkout");
  return (
    <Shell workspace="Storefront" sections={SECTIONS} current={current} onNavigate={setCurrent}>
      <div className="grid gap-3 sm:grid-cols-2">
        {PANELS.map((p, i) => (
          <div key={p.title} className={i === 2 ? "rounded border p-3 sm:col-span-2" : "rounded border p-3"}>
            <p className="text-[11px] text-muted-foreground">{p.title}</p>
            <p className="text-lg font-semibold tabular-nums">{p.values.at(-1)}</p>
            <Spark values={p.values} />
          </div>
        ))}
      </div>
    </Shell>
  );
}