# SettingsLayout

> The frame of a settings area: a section nav on the start side and a content column held to a reading measure, or the column alone where the app shell's swapped panel lists the sections.

```ts
import { SettingsLayout } from "@sdxc/ui/app";
```

Renders the nav and the content column. Both are in the markup on every route and the
container decides which one a narrow screen shows, so the layout needs no script and
follows a resized pane. Without `sections` the content shows on every route.

## Examples

```tsx
<SettingsLayout
	sections={[{ items: [{ href: "/settings/general", label: "General", current: true }, { href: "/settings/billing", label: "Billing" }] }]}
	backHref="/settings"
	labels={{ nav: "Settings", back: "Settings" }}
>
	<SettingsSection title="Monitor defaults" save="explicit" labels={{ save: "Save" }}>…</SettingsSection>
</SettingsLayout>
```

```tsx
<SettingsLayout backHref="/settings" labels={{ back: "Settings" }}>…</SettingsLayout>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `sections?` | `ReadonlyArray<Group>` | The nav's groups of sections. Omit them where the app shell's swapped panel already lists the sections: the layout is then the content column alone at every width. |
| `page?` | `"index" \| "section"` | Which route renders the layout. `"index"` is the settings root, which a narrow container shows as the nav alone; `"section"` shows a section's content. |
| `backHref?` | `string` | Where the narrow back link returns to: the settings index route. |
| `labels` | `Labels` |  |

Also accepts everything in `TagProps<"div">`.