Menubar

TSX
"use client";

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";

const triggerClass =
  "text-muted-foreground hover:bg-transparent hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-transparent aria-expanded:text-foreground";

export default function Menubar01() {
  return (
    <div className="w-full max-w-md">
      <div className="flex flex-col gap-1 border-b pb-2">
        <p className="truncate text-sm font-semibold">
          Q3 onboarding interviews
        </p>
        <Menubar
          aria-label="Document"
          className="-ml-1.5 h-auto border-0 p-0"
        >
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>File</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>
                Make a copy
                <MenubarShortcut>⌘D</MenubarShortcut>
              </MenubarItem>
              <MenubarItem>Move to folder</MenubarItem>
              <MenubarItem>Version history</MenubarItem>
              <MenubarSeparator />
              <MenubarItem variant="destructive">Move to trash</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Edit</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>
                Undo
                <MenubarShortcut>⌘Z</MenubarShortcut>
              </MenubarItem>
              <MenubarItem>
                Redo
                <MenubarShortcut>⇧⌘Z</MenubarShortcut>
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem>
                Find and replace
                <MenubarShortcut>⌘H</MenubarShortcut>
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Insert</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>Image</MenubarItem>
              <MenubarItem>Table</MenubarItem>
              <MenubarItem>Horizontal line</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Help</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>Keyboard shortcuts</MenubarItem>
              <MenubarItem>What&apos;s new</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
      </div>
    </div>
  );
}

TSX
"use client";

import {
  Clipboard,
  Copy,
  Download,
  FilePlus,
  FolderOpen,
  Image,
  LayoutGrid,
  Pencil,
  Save,
  Scissors,
  Table,
  Type,
} from "lucide-react";

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";

const triggerClass =
  "gap-1.5 focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_svg]:text-muted-foreground";

export default function Menubar02() {
  return (
    <Menubar aria-label="Whiteboard" className="w-fit max-w-full">
      <MenubarMenu>
        <MenubarTrigger className={triggerClass}>
          <FolderOpen aria-hidden="true" />
          File
        </MenubarTrigger>
        <MenubarContent className="min-w-48">
          <MenubarItem>
            <FilePlus aria-hidden="true" />
            New board
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <Save aria-hidden="true" />
            Save
            <MenubarShortcut>⌘S</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Download aria-hidden="true" />
            Export as PNG
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger className={triggerClass}>
          <Pencil aria-hidden="true" />
          Edit
        </MenubarTrigger>
        <MenubarContent className="min-w-48">
          <MenubarItem>
            <Scissors aria-hidden="true" />
            Cut
            <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <Copy aria-hidden="true" />
            Copy
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <Clipboard aria-hidden="true" />
            Paste
            <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger className={triggerClass}>
          <LayoutGrid aria-hidden="true" />
          Insert
        </MenubarTrigger>
        <MenubarContent className="min-w-48">
          <MenubarItem>
            <Type aria-hidden="true" />
            Text box
            <MenubarShortcut>T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <Image aria-hidden="true" />
            Image
            <MenubarShortcut>I</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            <Table aria-hidden="true" />
            Table
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

TSX
"use client";

import { cn } from "cn";

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";

const densities = [
  {
    label: "Compact",
    hint: "28px",
    bar: "h-7 p-0.5",
    trigger: "px-1.5 py-0 text-xs",
    item: "py-0.5 text-xs",
  },
  {
    label: "Default",
    hint: "32px",
    bar: "",
    trigger: "",
    item: "",
  },
  {
    label: "Comfortable",
    hint: "40px",
    bar: "h-10 gap-1 p-1",
    trigger: "px-3 py-1.5",
    item: "px-2 py-1.5",
  },
];

const menus = [
  {
    name: "File",
    items: [
      ["New project", "⌘N"],
      ["Open recent", "⌘O"],
    ],
  },
  {
    name: "Edit",
    items: [
      ["Undo", "⌘Z"],
      ["Redo", "⇧⌘Z"],
    ],
  },
  {
    name: "View",
    items: [
      ["Zoom in", "⌘+"],
      ["Zoom out", "⌘-"],
    ],
  },
];

export default function Menubar03() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {densities.map((density) => (
        <div
          key={density.label}
          className="flex flex-col items-start gap-1.5 sm:flex-row sm:items-center sm:justify-between sm:gap-2"
        >
          <Menubar
            aria-label={`${density.label} menubar`}
            className={density.bar}
          >
            {menus.map((menu) => (
              <MenubarMenu key={menu.name}>
                <MenubarTrigger
                  className={cn(
                    "focus-visible:ring-2 focus-visible:ring-ring/50",
                    density.trigger,
                  )}
                >
                  {menu.name}
                </MenubarTrigger>
                <MenubarContent>
                  {menu.items.map(([label, shortcut]) => (
                    <MenubarItem key={label} className={density.item}>
                      {label}
                      <MenubarShortcut>{shortcut}</MenubarShortcut>
                    </MenubarItem>
                  ))}
                </MenubarContent>
              </MenubarMenu>
            ))}
          </Menubar>
          <p className="text-xs text-muted-foreground">
            {density.label}{" "}
            <span className="tabular-nums">· {density.hint}</span>
          </p>
        </div>
      ))}
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { ChevronRight } from "lucide-react";

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar";

const sections = [
  {
    name: "Workspace",
    items: ["Overview", "Members", "Integrations"],
  },
  {
    name: "Billing",
    items: ["Plan and usage", "Invoices", "Payment methods"],
  },
  {
    name: "Security",
    items: ["Single sign-on", "Audit log", "API tokens"],
  },
  {
    name: "Developer",
    items: ["Webhooks", "Rate limits", "Sandbox keys"],
  },
];

const wideQuery = "(min-width: 640px)";

function subscribe(onChange: () => void) {
  const query = window.matchMedia(wideQuery);
  query.addEventListener("change", onChange);
  return () => query.removeEventListener("change", onChange);
}

// There is no room beside the rail on phones, so menus drop below instead.
function useWideViewport() {
  return React.useSyncExternalStore(
    subscribe,
    () => window.matchMedia(wideQuery).matches,
    () => true,
  );
}

export default function Menubar04() {
  const wide = useWideViewport();

  return (
    <Menubar
      orientation="vertical"
      aria-label="Settings"
      className="h-auto w-full max-w-48 flex-col items-stretch gap-0.5 p-1"
    >
      {sections.map((section, index) => (
        <MenubarMenu key={section.name}>
          <MenubarTrigger className="justify-between px-2 py-1.5 focus-visible:ring-2 focus-visible:ring-ring/50">
            {section.name}
            <ChevronRight
              aria-hidden="true"
              className="size-3.5 text-muted-foreground"
            />
          </MenubarTrigger>
          <MenubarContent
            side={wide ? "right" : "bottom"}
            align="start"
            sideOffset={wide ? 6 : 4}
          >
            {section.items.map((item) => (
              <MenubarItem key={item}>{item}</MenubarItem>
            ))}
            {index === 0 ? (
              <>
                <MenubarSeparator />
                <MenubarItem variant="destructive">Leave workspace</MenubarItem>
              </>
            ) : null}
          </MenubarContent>
        </MenubarMenu>
      ))}
    </Menubar>
  );
}

TSX
"use client";

import * as React from "react";
import { FlipHorizontal2, RotateCcw, RotateCw, Undo2 } from "lucide-react";

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar";

type Crop = "original" | "square" | "wide" | "portrait";
type Filter = "none" | "mono" | "warm" | "faded";

const crops: Record<Crop, { label: string; ratio: number; frame: string }> = {
  original: { label: "Original 3:2", ratio: 3 / 2, frame: "aspect-[3/2]" },
  square: { label: "Square 1:1", ratio: 1, frame: "aspect-square" },
  wide: { label: "Widescreen 16:9", ratio: 16 / 9, frame: "aspect-video" },
  portrait: { label: "Portrait 4:5", ratio: 4 / 5, frame: "aspect-[4/5]" },
};

const filters: Record<Filter, { label: string; className: string }> = {
  none: { label: "No filter", className: "" },
  mono: { label: "Mono", className: "grayscale" },
  warm: { label: "Warm", className: "sepia-[.35] saturate-150" },
  faded: { label: "Faded", className: "contrast-75 brightness-110" },
};

const triggerClass = "focus-visible:ring-2 focus-visible:ring-ring/50";

export default function Menubar05() {
  const [crop, setCrop] = React.useState<Crop>("original");
  const [filter, setFilter] = React.useState<Filter>("none");
  const [rotation, setRotation] = React.useState(0);
  const [flipped, setFlipped] = React.useState(false);
  const [showGrid, setShowGrid] = React.useState(true);
  const [showOriginal, setShowOriginal] = React.useState(false);

  const edited =
    crop !== "original" || filter !== "none" || rotation !== 0 || flipped;
  const quarterTurn = rotation % 180 !== 0;
  const ratio = crops[crop].ratio;
  const scale = quarterTurn ? Math.max(ratio, 1 / ratio) : 1;

  function rotate(delta: number) {
    setRotation((current) => (current + delta + 360) % 360);
  }

  function revert() {
    setCrop("original");
    setFilter("none");
    setRotation(0);
    setFlipped(false);
  }

  const summary = showOriginal
    ? "Showing the original photo"
    : edited
      ? [
          crops[crop].label,
          filter === "none" ? null : filters[filter].label,
          rotation ? `${rotation}°` : null,
          flipped ? "Flipped" : null,
        ]
          .filter(Boolean)
          .join(" · ")
      : "No edits yet";

  return (
    <section
      aria-labelledby="menubar-05-title"
      className="w-full max-w-md overflow-hidden rounded-xl border bg-card text-card-foreground"
    >
      <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
        <Menubar aria-label="Photo editor">
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Image</MenubarTrigger>
            <MenubarContent className="min-w-56">
              <MenubarItem closeOnClick={false} onClick={() => rotate(90)}>
                <RotateCw aria-hidden="true" />
                Rotate clockwise
                <MenubarShortcut>⌘R</MenubarShortcut>
              </MenubarItem>
              <MenubarItem closeOnClick={false} onClick={() => rotate(-90)}>
                <RotateCcw aria-hidden="true" />
                Rotate counterclockwise
                <MenubarShortcut>⇧⌘R</MenubarShortcut>
              </MenubarItem>
              <MenubarCheckboxItem
                checked={flipped}
                onCheckedChange={(checked) => setFlipped(checked)}
              >
                Flip horizontal
                <FlipHorizontal2
                  aria-hidden="true"
                  className="ml-auto size-4 text-muted-foreground"
                />
              </MenubarCheckboxItem>
              <MenubarSeparator />
              <MenubarSub>
                <MenubarSubTrigger>Crop to</MenubarSubTrigger>
                <MenubarSubContent className="min-w-44">
                  <MenubarRadioGroup
                    value={crop}
                    onValueChange={(value) => setCrop(value as Crop)}
                  >
                    {(Object.keys(crops) as Crop[]).map((key) => (
                      <MenubarRadioItem key={key} value={key}>
                        {crops[key].label}
                      </MenubarRadioItem>
                    ))}
                  </MenubarRadioGroup>
                </MenubarSubContent>
              </MenubarSub>
              <MenubarSeparator />
              <MenubarItem disabled={!edited} onClick={revert}>
                <Undo2 aria-hidden="true" />
                Revert all edits
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Filter</MenubarTrigger>
            <MenubarContent className="min-w-40">
              <MenubarRadioGroup
                value={filter}
                onValueChange={(value) => setFilter(value as Filter)}
              >
                <MenubarLabel className="text-xs text-muted-foreground">
                  Look
                </MenubarLabel>
                {(Object.keys(filters) as Filter[]).map((key) => (
                  <MenubarRadioItem key={key} value={key}>
                    {filters[key].label}
                  </MenubarRadioItem>
                ))}
              </MenubarRadioGroup>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>View</MenubarTrigger>
            <MenubarContent className="min-w-48">
              <MenubarCheckboxItem
                checked={showGrid}
                onCheckedChange={(checked) => setShowGrid(checked)}
              >
                Rule-of-thirds grid
              </MenubarCheckboxItem>
              <MenubarCheckboxItem
                checked={showOriginal}
                onCheckedChange={(checked) => setShowOriginal(checked)}
              >
                Compare with original
              </MenubarCheckboxItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
        <h3
          id="menubar-05-title"
          className="truncate text-xs text-muted-foreground"
        >
          harbor-dawn.jpg
        </h3>
      </div>

      <div className="flex justify-center bg-muted/40 p-4">
        <div
          className={`relative w-full max-w-72 overflow-hidden rounded-md bg-muted transition-[aspect-ratio] duration-200 ${
            showOriginal ? crops.original.frame : crops[crop].frame
          }`}
        >
          <img
            src="/placeholder.svg"
            alt="Harbor at dawn with moored fishing boats"
            className={`size-full object-cover transition-transform duration-200 ease-out ${
              showOriginal ? "" : filters[filter].className
            }`}
            style={
              showOriginal
                ? undefined
                : {
                    transform: `rotate(${rotation}deg) scale(${
                      flipped ? -scale : scale
                    }, ${scale})`,
                  }
            }
          />
          {showGrid ? (
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-0 *:absolute *:bg-background/70"
            >
              <span className="inset-y-0 left-1/3 w-px" />
              <span className="inset-y-0 left-2/3 w-px" />
              <span className="inset-x-0 top-1/3 h-px" />
              <span className="inset-x-0 top-2/3 h-px" />
            </div>
          ) : null}
        </div>
      </div>

      <p
        aria-live="polite"
        className="truncate border-t px-3 py-2 text-xs text-muted-foreground"
      >
        {summary}
      </p>
    </section>
  );
}

TSX
"use client";

import * as React from "react";
import { Lock } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Label } from "@/components/ui/label";
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";
import { Switch } from "@/components/ui/switch";

const triggerClass =
  "focus-visible:ring-2 focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50";

export default function Menubar06() {
  const [readOnly, setReadOnly] = React.useState(true);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <Menubar aria-label="Contract">
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>File</MenubarTrigger>
            <MenubarContent className="min-w-44">
              <MenubarItem>
                Download PDF
                <MenubarShortcut>⌘P</MenubarShortcut>
              </MenubarItem>
              <MenubarItem>Copy link</MenubarItem>
              <MenubarSeparator />
              <MenubarItem disabled={readOnly}>Rename</MenubarItem>
              <MenubarItem disabled={readOnly} variant="destructive">
                Delete contract
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu disabled={readOnly}>
            <MenubarTrigger className={triggerClass}>Edit</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>
                Undo
                <MenubarShortcut>⌘Z</MenubarShortcut>
              </MenubarItem>
              <MenubarItem>Suggest changes</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu disabled={readOnly}>
            <MenubarTrigger className={triggerClass}>Insert</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>Signature field</MenubarItem>
              <MenubarItem>Date field</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
        {readOnly ? (
          <Badge variant="secondary">
            <Lock aria-hidden="true" />
            View only
          </Badge>
        ) : null}
      </div>
      <p className="text-xs text-muted-foreground">
        {readOnly
          ? "Signed contracts are locked. You can still download or share them."
          : "Editing is on. Changes are tracked for the other signers."}
      </p>
      <div className="flex items-center gap-2 border-t pt-3">
        <Switch
          id="menubar-06-read-only"
          size="sm"
          checked={readOnly}
          onCheckedChange={setReadOnly}
        />
        <Label htmlFor="menubar-06-read-only" className="text-sm font-normal">
          Read-only mode
        </Label>
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { LogOut, Settings, UserRound } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar";

const workspaces = [
  { id: "northwind", name: "Northwind Studio", initials: "NS" },
  { id: "acme", name: "Acme Logistics", initials: "AL" },
  { id: "fieldnotes", name: "Fieldnotes", initials: "FN" },
];

const pillTrigger =
  "rounded-full px-3 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-primary aria-expanded:text-primary-foreground";

export default function Menubar07() {
  const [workspace, setWorkspace] = React.useState("northwind");
  const current = workspaces.find((item) => item.id === workspace);

  return (
    <Menubar
      aria-label="Workspace"
      className="h-10 w-full max-w-md gap-1 rounded-full bg-card p-1 shadow-sm"
    >
      <MenubarMenu>
        <MenubarTrigger className={pillTrigger}>Projects</MenubarTrigger>
        <MenubarContent className="rounded-xl" sideOffset={10}>
          <MenubarItem>Spring campaign</MenubarItem>
          <MenubarItem>Website refresh</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>All projects</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger className={pillTrigger}>Reports</MenubarTrigger>
        <MenubarContent className="rounded-xl" sideOffset={10}>
          <MenubarItem>Weekly summary</MenubarItem>
          <MenubarItem>Time tracking</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger
          aria-label={`Account menu, ${current?.name}`}
          className="ml-auto rounded-full p-0 hover:bg-transparent focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-transparent aria-expanded:ring-2 aria-expanded:ring-primary/40"
        >
          <Avatar size="sm">
            <AvatarFallback>MR</AvatarFallback>
          </Avatar>
        </MenubarTrigger>
        <MenubarContent
          align="end"
          alignOffset={0}
          sideOffset={10}
          className="min-w-56 rounded-xl"
        >
          <MenubarGroup>
            <MenubarLabel className="flex flex-col py-1.5">
              <span>Maya Rodriguez</span>
              <span className="text-xs font-normal text-muted-foreground">
                maya@northwind.studio
              </span>
            </MenubarLabel>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarLabel className="text-xs font-normal text-muted-foreground">
              Workspace
            </MenubarLabel>
            <MenubarRadioGroup value={workspace} onValueChange={setWorkspace}>
              {workspaces.map((item) => (
                <MenubarRadioItem key={item.id} value={item.id}>
                  <span
                    aria-hidden="true"
                    className="flex size-5 items-center justify-center rounded-md bg-muted text-[10px] font-medium"
                  >
                    {item.initials}
                  </span>
                  {item.name}
                </MenubarRadioItem>
              ))}
            </MenubarRadioGroup>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem>
            <UserRound aria-hidden="true" />
            Profile
          </MenubarItem>
          <MenubarItem>
            <Settings aria-hidden="true" />
            Preferences
          </MenubarItem>
          <MenubarItem variant="destructive">
            <LogOut aria-hidden="true" />
            Sign out
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

TSX
"use client";

import * as React from "react";
import { CircleAlert, CircleCheck, CloudUpload, Send } from "lucide-react";

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";
import { Spinner } from "@/components/ui/spinner";

type Status = "idle" | "loading" | "success" | "error";

const triggerClass = "focus-visible:ring-2 focus-visible:ring-ring/50";

function useAsyncAction(duration: number, outcome: "success" | "error") {
  const [status, setStatus] = React.useState<Status>("idle");
  const timers = React.useRef<number[]>([]);

  React.useEffect(() => {
    const pending = timers.current;
    return () => {
      for (const id of pending) window.clearTimeout(id);
    };
  }, []);

  const run = () => {
    if (status === "loading") return;
    setStatus("loading");
    timers.current.push(
      window.setTimeout(() => {
        setStatus(outcome);
        if (outcome === "success") {
          timers.current.push(window.setTimeout(() => setStatus("idle"), 2400));
        }
      }, duration),
    );
  };

  return { status, run };
}

function StatusIcon({
  status,
  idle,
}: {
  status: Status;
  idle: React.ReactNode;
}) {
  if (status === "loading") return <Spinner aria-hidden="true" />;
  if (status === "success")
    return <CircleCheck aria-hidden="true" className="text-success" />;
  if (status === "error")
    return <CircleAlert aria-hidden="true" className="text-destructive" />;
  return idle;
}

export default function Menubar08() {
  const publish = useAsyncAction(1400, "success");
  const sync = useAsyncAction(1600, "error");

  const publishLabel = {
    idle: "Publish changes",
    loading: "Publishing…",
    success: "Published",
    error: "Publish failed",
  }[publish.status];

  const syncLabel = {
    idle: "Sync to cloud",
    loading: "Syncing…",
    success: "Synced",
    error: "Sync failed, retry",
  }[sync.status];

  const barStatus =
    publish.status === "loading" || sync.status === "loading"
      ? { text: "Working…", tone: "text-muted-foreground" }
      : sync.status === "error"
        ? { text: "Offline copy", tone: "text-destructive" }
        : publish.status === "success"
          ? { text: "Live", tone: "text-success" }
          : { text: "Draft", tone: "text-muted-foreground" };

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <div className="flex items-center justify-between gap-2 rounded-lg border bg-card p-[3px] pr-2">
        <Menubar aria-label="Release" className="border-0 p-0">
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Release</MenubarTrigger>
            <MenubarContent className="min-w-52">
              <MenubarItem
                closeOnClick={false}
                disabled={publish.status === "loading"}
                onClick={publish.run}
              >
                <StatusIcon
                  status={publish.status}
                  idle={<Send aria-hidden="true" />}
                />
                {publishLabel}
                <MenubarShortcut>⌘↵</MenubarShortcut>
              </MenubarItem>
              <MenubarItem
                closeOnClick={false}
                disabled={sync.status === "loading"}
                onClick={sync.run}
                className={
                  sync.status === "error" ? "text-destructive" : undefined
                }
              >
                <StatusIcon
                  status={sync.status}
                  idle={<CloudUpload aria-hidden="true" />}
                />
                {syncLabel}
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem>View release notes</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>History</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>v2.4.1 · today</MenubarItem>
              <MenubarItem>v2.4.0 · Sep 18</MenubarItem>
              <MenubarItem>v2.3.2 · Sep 02</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
        <span
          role="status"
          className={`flex items-center gap-1.5 text-xs font-medium ${barStatus.tone}`}
        >
          <span
            aria-hidden="true"
            className="size-1.5 rounded-full bg-current"
          />
          {barStatus.text}
        </span>
      </div>
      <p className="text-xs text-muted-foreground">
        Menu items stay open while they run, so progress and errors show in
        place.
      </p>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { CircleCheck, CircleDot } from "lucide-react";

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";
import { Textarea } from "@/components/ui/textarea";

const initialNotes = `## v2.4.0

- Faster CSV exports for workspaces over 10,000 rows.
- Fixed a timezone bug in scheduled reports.`;

const snippets = [
  { label: "Version heading", text: "\n\n## v2.4.1\n" },
  { label: "Fixed entry", text: "\n- Fixed " },
  { label: "Breaking change", text: "\n\n> Breaking: " },
];

const triggerClass = "focus-visible:ring-2 focus-visible:ring-ring/50";

export default function Menubar09() {
  const [notes, setNotes] = React.useState(initialNotes);
  const [savedNotes, setSavedNotes] = React.useState(initialNotes);
  const [wrap, setWrap] = React.useState(true);
  const [showCount, setShowCount] = React.useState(true);

  const dirty = notes !== savedNotes;
  const words = notes.trim() ? notes.trim().split(/\s+/).length : 0;

  return (
    <div className="w-full max-w-lg overflow-hidden rounded-xl border bg-card text-card-foreground">
      <div className="flex items-center justify-between gap-2 border-b bg-muted/40 px-2 py-1.5">
        <Menubar
          aria-label="Release notes editor"
          className="border-none bg-transparent p-0"
        >
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>File</MenubarTrigger>
            <MenubarContent>
              <MenubarItem
                disabled={!dirty}
                onClick={() => setSavedNotes(notes)}
              >
                Save draft
                <MenubarShortcut>⌘S</MenubarShortcut>
              </MenubarItem>
              <MenubarItem
                disabled={!dirty}
                onClick={() => setNotes(savedNotes)}
              >
                Revert to saved
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem
                variant="destructive"
                onClick={() => setNotes("")}
              >
                Clear all notes
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Insert</MenubarTrigger>
            <MenubarContent>
              <MenubarGroup>
                <MenubarLabel>Snippets</MenubarLabel>
                {snippets.map((snippet) => (
                  <MenubarItem
                    key={snippet.label}
                    onClick={() => setNotes((value) => value + snippet.text)}
                  >
                    {snippet.label}
                  </MenubarItem>
                ))}
              </MenubarGroup>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>View</MenubarTrigger>
            <MenubarContent>
              <MenubarCheckboxItem
                checked={wrap}
                onCheckedChange={(checked) => setWrap(checked)}
              >
                Wrap long lines
              </MenubarCheckboxItem>
              <MenubarCheckboxItem
                checked={showCount}
                onCheckedChange={(checked) => setShowCount(checked)}
              >
                Word count
              </MenubarCheckboxItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
        <span className="truncate text-xs text-muted-foreground">
          release-notes.md
        </span>
      </div>
      <label htmlFor="menubar-09-notes" className="sr-only">
        Release notes
      </label>
      <Textarea
        id="menubar-09-notes"
        value={notes}
        onChange={(event) => setNotes(event.target.value)}
        wrap={wrap ? "soft" : "off"}
        className="min-h-44 resize-none rounded-none border-0 font-mono text-[13px] leading-relaxed shadow-none focus-visible:ring-0 dark:bg-transparent"
      />
      <div className="flex items-center justify-between gap-2 border-t px-3 py-2 text-xs text-muted-foreground">
        <span className="flex items-center gap-1.5" aria-live="polite">
          {dirty ? (
            <>
              <CircleDot className="size-3.5 text-warning" aria-hidden="true" />
              Unsaved changes
            </>
          ) : (
            <>
              <CircleCheck
                className="size-3.5 text-success"
                aria-hidden="true"
              />
              Draft saved
            </>
          )}
        </span>
        {showCount ? (
          <span className="tabular-nums">
            {words} {words === 1 ? "word" : "words"}
          </span>
        ) : null}
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import {
  FileImage,
  FileSpreadsheet,
  FileText,
  Folder,
  type LucideIcon,
} from "lucide-react";

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";

type Kind = "folder" | "document" | "sheet" | "image";

type Entry = {
  name: string;
  kind: Kind;
  size: number;
  modified: string;
  hidden?: boolean;
};

const icons: Record<Kind, LucideIcon> = {
  folder: Folder,
  document: FileText,
  sheet: FileSpreadsheet,
  image: FileImage,
};

const entries: Entry[] = [
  { name: "Brand assets", kind: "folder", size: 0, modified: "2026-09-21" },
  {
    name: "Q3 board deck.pdf",
    kind: "document",
    size: 4200,
    modified: "2026-09-18",
  },
  {
    name: "Revenue forecast.xlsx",
    kind: "sheet",
    size: 860,
    modified: "2026-09-24",
  },
  {
    name: "Launch banner.png",
    kind: "image",
    size: 2300,
    modified: "2026-09-12",
  },
  {
    name: "Onboarding copy.docx",
    kind: "document",
    size: 120,
    modified: "2026-09-23",
  },
  {
    name: ".sync-cache",
    kind: "document",
    size: 12,
    modified: "2026-09-25",
    hidden: true,
  },
];

const triggerClass = "focus-visible:ring-2 focus-visible:ring-ring/50";

function formatSize(kb: number) {
  if (kb === 0) return "—";
  return kb >= 1000 ? `${(kb / 1000).toFixed(1)} MB` : `${kb} KB`;
}

export default function Menubar10() {
  const [layout, setLayout] = React.useState("list");
  const [sortBy, setSortBy] = React.useState("modified");
  const [foldersFirst, setFoldersFirst] = React.useState(true);
  const [showHidden, setShowHidden] = React.useState(false);

  const visible = React.useMemo(() => {
    const list = entries.filter((entry) => showHidden || !entry.hidden);
    list.sort((a, b) => {
      if (foldersFirst && a.kind !== b.kind) {
        if (a.kind === "folder") return -1;
        if (b.kind === "folder") return 1;
      }
      if (sortBy === "name") return a.name.localeCompare(b.name);
      if (sortBy === "size") return b.size - a.size;
      return b.modified.localeCompare(a.modified);
    });
    return list;
  }, [sortBy, foldersFirst, showHidden]);

  return (
    <div className="w-full max-w-lg rounded-xl border bg-card text-card-foreground">
      <div className="flex flex-wrap items-center justify-between gap-2 border-b px-3 py-2">
        <Menubar aria-label="File browser">
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>File</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>
                New folder
                <MenubarShortcut>⇧⌘N</MenubarShortcut>
              </MenubarItem>
              <MenubarItem>
                Upload files
                <MenubarShortcut>⌘U</MenubarShortcut>
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Download as ZIP</MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>View</MenubarTrigger>
            <MenubarContent>
              <MenubarRadioGroup value={layout} onValueChange={setLayout}>
                <MenubarRadioItem value="list">As list</MenubarRadioItem>
                <MenubarRadioItem value="grid">As icons</MenubarRadioItem>
              </MenubarRadioGroup>
              <MenubarSeparator />
              <MenubarCheckboxItem
                checked={showHidden}
                onCheckedChange={(checked) => setShowHidden(checked)}
              >
                Show hidden files
              </MenubarCheckboxItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Sort</MenubarTrigger>
            <MenubarContent>
              <MenubarRadioGroup value={sortBy} onValueChange={setSortBy}>
                <MenubarLabel>Sort by</MenubarLabel>
                <MenubarRadioItem value="name">Name</MenubarRadioItem>
                <MenubarRadioItem value="modified">Date modified</MenubarRadioItem>
                <MenubarRadioItem value="size">Size</MenubarRadioItem>
              </MenubarRadioGroup>
              <MenubarSeparator />
              <MenubarCheckboxItem
                checked={foldersFirst}
                onCheckedChange={(checked) => setFoldersFirst(checked)}
              >
                Keep folders on top
              </MenubarCheckboxItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
        <span className="text-xs text-muted-foreground tabular-nums">
          {visible.length} items
        </span>
      </div>

      {layout === "list" ? (
        <ul aria-label="Files in Marketing" className="divide-y">
          {visible.map((entry) => {
            const Icon = icons[entry.kind];
            return (
              <li
                key={entry.name}
                className="flex items-center gap-3 px-3 py-2 text-sm"
              >
                <Icon
                  className="size-4 shrink-0 text-muted-foreground"
                  aria-hidden="true"
                />
                <span className="min-w-0 flex-1 truncate">{entry.name}</span>
                <span className="hidden text-xs text-muted-foreground tabular-nums sm:inline">
                  {entry.modified}
                </span>
                <span className="w-16 text-right text-xs text-muted-foreground tabular-nums">
                  {formatSize(entry.size)}
                </span>
              </li>
            );
          })}
        </ul>
      ) : (
        <ul
          aria-label="Files in Marketing"
          className="grid grid-cols-2 gap-2 p-3 sm:grid-cols-3"
        >
          {visible.map((entry) => {
            const Icon = icons[entry.kind];
            return (
              <li
                key={entry.name}
                className="flex flex-col items-center gap-2 rounded-lg bg-muted/50 px-2 py-4 text-center"
              >
                <Icon
                  className="size-7 text-muted-foreground"
                  strokeWidth={1.5}
                  aria-hidden="true"
                />
                <span className="w-full truncate text-xs font-medium">
                  {entry.name}
                </span>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import {
  Archive,
  Inbox,
  MailOpen,
  Paperclip,
  Reply,
  Star,
  Trash2,
} from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar";

const folders = ["Inbox", "Invoices", "Vendors", "Archive"];
const labels = ["Finance", "Urgent", "Follow up"];

const triggerClass = "focus-visible:ring-2 focus-visible:ring-ring/50";

export default function Menubar11() {
  const [folder, setFolder] = React.useState("Inbox");
  const [unread, setUnread] = React.useState(false);
  const [starred, setStarred] = React.useState(false);
  const [applied, setApplied] = React.useState<string[]>(["Finance"]);

  function toggleLabel(label: string, checked: boolean) {
    setApplied((current) =>
      checked ? [...current, label] : current.filter((item) => item !== label),
    );
  }

  return (
    <article
      aria-labelledby="menubar-11-subject"
      className="w-full max-w-lg rounded-xl border bg-card text-card-foreground"
    >
      <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
        <Menubar aria-label="Message actions">
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Message</MenubarTrigger>
            <MenubarContent>
              <MenubarItem>
                <Reply aria-hidden="true" />
                Reply
                <MenubarShortcut>R</MenubarShortcut>
              </MenubarItem>
              <MenubarItem onClick={() => setUnread((value) => !value)}>
                <MailOpen aria-hidden="true" />
                {unread ? "Mark as read" : "Mark as unread"}
                <MenubarShortcut>U</MenubarShortcut>
              </MenubarItem>
              <MenubarItem onClick={() => setStarred((value) => !value)}>
                <Star aria-hidden="true" />
                {starred ? "Remove star" : "Star message"}
                <MenubarShortcut>S</MenubarShortcut>
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem
                variant="destructive"
                onClick={() => setFolder("Trash")}
              >
                <Trash2 aria-hidden="true" />
                Move to trash
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Organize</MenubarTrigger>
            <MenubarContent>
              <MenubarSub>
                <MenubarSubTrigger>
                  <Inbox aria-hidden="true" />
                  Move to
                </MenubarSubTrigger>
                <MenubarSubContent>
                  <MenubarRadioGroup value={folder} onValueChange={setFolder}>
                    {folders.map((name) => (
                      <MenubarRadioItem key={name} value={name}>
                        {name}
                      </MenubarRadioItem>
                    ))}
                  </MenubarRadioGroup>
                </MenubarSubContent>
              </MenubarSub>
              <MenubarSub>
                <MenubarSubTrigger>Labels</MenubarSubTrigger>
                <MenubarSubContent>
                  {labels.map((label) => (
                    <MenubarCheckboxItem
                      key={label}
                      checked={applied.includes(label)}
                      onCheckedChange={(checked) => toggleLabel(label, checked)}
                    >
                      {label}
                    </MenubarCheckboxItem>
                  ))}
                </MenubarSubContent>
              </MenubarSub>
              <MenubarSeparator />
              <MenubarItem onClick={() => setFolder("Archive")}>
                <Archive aria-hidden="true" />
                Archive
                <MenubarShortcut>E</MenubarShortcut>
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
          {starred ? (
            <>
              <Star
                className="size-3.5 fill-current text-warning"
                aria-hidden="true"
              />
              <span className="sr-only">Starred,</span>
            </>
          ) : null}
          {folder}
        </span>
      </div>

      <div className="flex flex-col gap-4 p-4">
        <div className="flex items-start gap-3">
          <Avatar>
            <AvatarFallback>NP</AvatarFallback>
          </Avatar>
          <div className="min-w-0 flex-1">
            <div className="flex items-baseline justify-between gap-2">
              <p className="truncate text-sm font-medium">Nora Patel</p>
              <time
                dateTime="2026-09-24T09:12"
                className="shrink-0 text-xs text-muted-foreground"
              >
                9:12 AM
              </time>
            </div>
            <h3
              id="menubar-11-subject"
              className={
                unread ? "text-sm font-semibold" : "text-sm text-muted-foreground"
              }
            >
              Invoice INV-4821 is due on October 1
            </h3>
          </div>
        </div>

        {applied.length > 0 ? (
          <ul aria-label="Labels" className="flex flex-wrap gap-1.5">
            {applied.map((label) => (
              <li key={label}>
                <Badge variant={label === "Urgent" ? "destructive" : "secondary"}>
                  {label}
                </Badge>
              </li>
            ))}
          </ul>
        ) : null}

        <p className="text-sm leading-relaxed">
          Hi Daniel, attached is the September invoice for the Northwind
          hosting contract. Payment by bank transfer is preferred; reply here if
          your finance team needs a PO number on it.
        </p>

        <div className="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm">
          <Paperclip
            className="size-4 text-muted-foreground"
            aria-hidden="true"
          />
          <span className="min-w-0 flex-1 truncate">invoice-4821.pdf</span>
          <span className="text-xs text-muted-foreground">184 KB</span>
        </div>
      </div>
    </article>
  );
}

TSX
"use client";

import * as React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";

type CalendarId = "work" | "personal" | "team";

type CalendarEvent = {
  id: number;
  title: string;
  day: string;
  time: string;
  calendar: CalendarId;
};

const calendars: { id: CalendarId; name: string; dot: string }[] = [
  { id: "work", name: "Work", dot: "bg-chart-1" },
  { id: "team", name: "Team rituals", dot: "bg-chart-2" },
  { id: "personal", name: "Personal", dot: "bg-chart-3" },
];

// Monday of the week the calendar opens on.
const firstMonday = new Date(2025, 8, 29);

function addDays(date: Date, days: number) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
}

function dayKey(date: Date) {
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${date.getFullYear()}-${month}-${day}`;
}

function dayLabel(date: Date) {
  return `${date.toLocaleDateString("en-US", { weekday: "short" })} ${date.getDate()}`;
}

function shortDate(date: Date) {
  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

const initialEvents: CalendarEvent[] = [
  {
    id: 1,
    title: "Sprint planning",
    day: "2025-09-29",
    time: "09:30",
    calendar: "team",
  },
  {
    id: 2,
    title: "Pricing page review",
    day: "2025-09-29",
    time: "14:00",
    calendar: "work",
  },
  {
    id: 3,
    title: "Dentist",
    day: "2025-09-30",
    time: "08:15",
    calendar: "personal",
  },
  {
    id: 4,
    title: "Customer call: Acme",
    day: "2025-09-30",
    time: "16:00",
    calendar: "work",
  },
  {
    id: 5,
    title: "Design critique",
    day: "2025-10-01",
    time: "11:00",
    calendar: "team",
  },
  {
    id: 6,
    title: "Q4 roadmap draft due",
    day: "2025-10-03",
    time: "12:00",
    calendar: "work",
  },
  {
    id: 7,
    title: "Trail run with Sam",
    day: "2025-10-04",
    time: "07:30",
    calendar: "personal",
  },
];

const triggerClass = "focus-visible:ring-2 focus-visible:ring-ring/50";

export default function Menubar12() {
  const [events, setEvents] = React.useState(initialEvents);
  const [view, setView] = React.useState("week");
  const [enabled, setEnabled] = React.useState<Record<CalendarId, boolean>>({
    work: true,
    team: true,
    personal: true,
  });
  const [showWeekend, setShowWeekend] = React.useState(false);
  const [weekOffset, setWeekOffset] = React.useState(0);

  const weekStart = addDays(firstMonday, weekOffset * 7);
  const dayCount = view === "day" ? 1 : showWeekend ? 7 : 5;
  const shownDays = Array.from({ length: dayCount }, (_, index) =>
    addDays(weekStart, index),
  );
  const weekEnd = shownDays[shownDays.length - 1];
  const dotFor = (id: CalendarId) =>
    calendars.find((calendar) => calendar.id === id)?.dot;

  function addEvent(calendar: CalendarId, title: string) {
    setEvents((current) => [
      ...current,
      {
        id: Date.now(),
        title,
        day: dayKey(weekStart),
        time: "17:00",
        calendar,
      },
    ]);
  }

  return (
    <section
      aria-labelledby="menubar-12-title"
      className="w-full max-w-md rounded-xl border bg-card text-card-foreground"
    >
      <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
        <Menubar aria-label="Calendar">
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Event</MenubarTrigger>
            <MenubarContent>
              <MenubarItem onClick={() => addEvent("work", "Focus block")}>
                New focus block
                <MenubarShortcut>⌘E</MenubarShortcut>
              </MenubarItem>
              <MenubarItem onClick={() => addEvent("team", "1:1 with Priya")}>
                Schedule 1:1
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem
                disabled={events.length === initialEvents.length}
                onClick={() => setEvents(initialEvents)}
              >
                Undo added events
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>Calendars</MenubarTrigger>
            <MenubarContent className="min-w-44">
              <MenubarGroup>
                <MenubarLabel>Show on grid</MenubarLabel>
                {calendars.map((calendar) => (
                  <MenubarCheckboxItem
                    key={calendar.id}
                    checked={enabled[calendar.id]}
                    onCheckedChange={(checked) =>
                      setEnabled((current) => ({
                        ...current,
                        [calendar.id]: checked,
                      }))
                    }
                  >
                    <span
                      className={`size-2 rounded-full ${calendar.dot}`}
                      aria-hidden="true"
                    />
                    {calendar.name}
                  </MenubarCheckboxItem>
                ))}
              </MenubarGroup>
            </MenubarContent>
          </MenubarMenu>
          <MenubarMenu>
            <MenubarTrigger className={triggerClass}>View</MenubarTrigger>
            <MenubarContent>
              <MenubarRadioGroup value={view} onValueChange={setView}>
                <MenubarRadioItem value="day">
                  Day
                  <MenubarShortcut>D</MenubarShortcut>
                </MenubarRadioItem>
                <MenubarRadioItem value="week">
                  Work week
                  <MenubarShortcut>W</MenubarShortcut>
                </MenubarRadioItem>
              </MenubarRadioGroup>
              <MenubarSeparator />
              <MenubarCheckboxItem
                checked={showWeekend}
                onCheckedChange={(checked) => setShowWeekend(checked)}
              >
                Include weekends
              </MenubarCheckboxItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
        <div className="flex items-center">
          <Button
            variant="ghost"
            size="icon-sm"
            aria-label="Previous week"
            onClick={() => setWeekOffset((value) => value - 1)}
          >
            <ChevronLeft aria-hidden="true" />
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            aria-label="Next week"
            onClick={() => setWeekOffset((value) => value + 1)}
          >
            <ChevronRight aria-hidden="true" />
          </Button>
        </div>
      </div>

      <h3 id="menubar-12-title" className="px-4 pt-3 text-sm font-semibold">
        {view === "day"
          ? weekStart.toLocaleDateString("en-US", {
              weekday: "long",
              month: "short",
              day: "numeric",
            })
          : `${shortDate(weekStart)} – ${shortDate(weekEnd)}`}
        <span className="sr-only"> agenda</span>
      </h3>

      <div className="flex flex-col gap-4 p-4">
        {shownDays.map((date) => {
          const day = dayKey(date);
          const dayEvents = events
            .filter((event) => event.day === day && enabled[event.calendar])
            .sort((a, b) => a.time.localeCompare(b.time));
          return (
            <div key={day} className="grid gap-1.5 sm:grid-cols-[3.5rem_1fr] sm:gap-3">
              <p className="text-xs font-medium text-muted-foreground sm:pt-1.5">
                {dayLabel(date)}
              </p>
              {dayEvents.length > 0 ? (
                <ul className="flex flex-col gap-1.5">
                  {dayEvents.map((event) => (
                    <li
                      key={event.id}
                      className="flex items-center gap-2.5 rounded-md bg-muted/60 px-2.5 py-1.5 text-sm"
                    >
                      <span
                        className={`size-2 shrink-0 rounded-full ${dotFor(event.calendar)}`}
                        aria-hidden="true"
                      />
                      <span className="min-w-0 flex-1 truncate">
                        {event.title}
                      </span>
                      <time className="text-xs text-muted-foreground tabular-nums">
                        {event.time}
                      </time>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="rounded-md border border-dashed px-2.5 py-1.5 text-sm text-muted-foreground">
                  Nothing scheduled
                </p>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}