SectionDialog

A dialog with its own nav, for something with parts — the studio's settings. The sections run down the left, the open one on the right under its trail (Studio, or Members › Katka with someone open; the dialog's own title is read, not shown). Sections can sit under eyebrows — Account, Workspace, AI. On a phone it's a page of its own: a menu on the left opens the sections, the open one's name beside it, × on the right; with someone open, an arrow back takes the menu's place and the title is their name alone. A Dialog at its page size — 64rem wide, one height throughout, so moving between sections doesn't jump.

Settings

import { SectionDialog } from "@/components/shared/section-dialog";

<SectionDialog
  open={open}
  onOpenChange={setOpen}
  title={t("title")}
  sections={[
    { key: "studio", label: t("sections.studio"), icon: Store, group: general },
    { key: "page", label: t("sections.page"), icon: Link2, group: general },
    { key: "rules", label: t("sections.rules"), icon: CalendarClock, group: general },
    { key: "members", label: t("sections.members"), icon: Users, group: t("sections.team") },
  ]}
  current={section}
  onSection={setSection}
  closeLabel={t("close")}
>
  {section === "members" ? <MembersSection … /> : <SettingsForm section={section} … />}
</SectionDialog>

API reference

Prop	Type	Default	Description
open, onOpenChange	boolean, (open) => void	—	As a Dialog's.
title	string	—	What it all is — the trail's first step and the nav's name.
sections	{ key, label, icon, group? }[]	—	The nav, in order. A group's name heads its sections as an eyebrow, where the group changes.
current, onSection	key, (key) => void	—	The open section, and moving to another.
closeLabel	string	—	The X's accessible name.
children	ReactNode	—	The open section's content, in a DialogBody that scrolls on its own.

Guidelines

Keep what's been changed while another section is open: one form across the sections, not one per section.
A handful of sections at most; a long list wants a page.