# App shell
The frame of an admin screen: `app` with a header, a side navigation, the main column and an optional side column. Below 1024 px the side navigation becomes a panel opened from the header. These docs stand in it. A site's header is a [navbar](navbar.md).
## The parts
The shell is the one part of the library that looks at the window; everything inside it measures its own region. `app-main` and `app-aside` are regions, so `md:` inside the main column measures the column.
```html
```
The [demo screens](https://redz-tech.github.io/REDZ.UI/reference/demo/list.html) show the whole shell: a list, a resource page with its side column, a settings form.
### Folded to a rail
On a wide window the side navigation folds into a rail of its icons and back: a header button with `command="--fold"` and `aria-controls` naming the sidebar puts `data-folded` on it and says so in `aria-pressed`. Folded, each link shows its words as a tooltip and keeps them as its name. The library stores nothing: it tells the page in `redz:fold` (`detail.folded`), and the page that keeps the choice writes `data-folded` back on the sidebar when it loads. These docs fold so - the button beside their burger.
```html
document.addEventListener('redz:fold', (event) => localStorage.setItem('folded', event.detail.folded ? '1' : ''));
```
A shell without `app-sidebar` - a page whose role has no sections - is one column by itself: no class to add.
## States
## Keyboard and accessibility
- The header is a ``, the side navigation a named `