# Layout

> App-shell layout primitives. Container switches to row automatically when a sider is among its children — drop in header / sider / content / footer and it falls into place.

Source: https://ngwr.dev/reference/components/layout  
Kind: Composite

## Installation

```angular-ts
import {
  WrLayout,
  WrLayoutHeader,
  WrLayoutSider,
  WrLayoutContent,
  WrLayoutFooter
} from 'ngwr/layout';
```

## Header / content / footer

```angular-html
<wr-layout>
  <wr-layout-header>App bar</wr-layout-header>
  <wr-layout-content>Main</wr-layout-content>
  <wr-layout-footer>© 2026</wr-layout-footer>
</wr-layout>
```

## Collapsible sider

Nested row layout — header on top, sider + content beneath.

```angular-html
<wr-layout>
  <wr-layout-header>App bar</wr-layout-header>
  <wr-layout>
    <wr-layout-sider [(collapsed)]="collapsed">Sidebar</wr-layout-sider>
    <wr-layout-content>Main</wr-layout-content>
  </wr-layout>
</wr-layout>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `<wr-layout>` | Flex container. Lays out as a column by default; switches to a row when a `<wr-layout-sider>` is among its direct children. | `component` | `—` |
| `<wr-layout-header>` | Top bar (`role="banner"`). Doesn't grow. | `component` | `—` |
| `<wr-layout-sider>` | Collapsible side panel. `toggle()` flips the collapsed state. | `component` | `—` |
| `[(collapsed)]` | Two-way bindable collapsed state. | `boolean` | `false` |
| `width` | Width when expanded. Any CSS length. | `string` | `'16rem'` |
| `collapsedWidth` | Width when collapsed. Any CSS length; `0` fully hides it. | `string` | `'4rem'` |
| `reverse` | Place the sider on the right edge instead of the left. | `boolean` | `false` |
| `(collapsedChanged)` | Emits whenever `collapsed` changes, alongside the two-way binding. | `boolean` | `—` |
| `<wr-layout-content>` | Main area (`role="main"`). Flex-grows to fill. | `component` | `—` |
| `<wr-layout-footer>` | Bottom bar (`role="contentinfo"`). Doesn't grow. | `component` | `—` |