# AppShell

O layout de regiões de um produto. Nasce no mobile: cabeçalho em cima, conteúdo embaixo, navegação num Drawer; na tela larga, a gaveta vira a coluna do lado.

## Playground

```html
<div class="feitio-app-frame" style="block-size: 22rem; inline-size: min(100%, 24rem); overflow-y: auto; border: var(--feitio-border-width) solid var(--feitio-color-line)"><div class="feitio-app"><header class="feitio-app-header" data-hide-on-scroll><a class="brand" href="#pg-app-content">Produto</a><button type="button" class="feitio-button menu" data-size="small" popovertarget="pg-app" aria-controls="pg-app">Menu<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></header><nav class="feitio-drawer feitio-app-nav" id="pg-app" popover aria-label="Menu"><div class="drawer-header"><h2>Menu</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-app" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fechar</button></div><div class="drawer-body"><nav class="feitio-nav"><div class="group"><p class="group-title">Trabalho</p><ul><li><a href="#playground" aria-current="page"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg>Agendamentos</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-task"></use></svg>Tarefas</a></li></ul></div><div class="group"><p class="group-title">Produto</p><ul><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-sliders"></use></svg>Ajustes</a></li></ul></div></nav></div></nav><div class="feitio-app-main" id="pg-app-content" tabindex="-1"><div style="padding: var(--feitio-space-4)"><h3>Agendamentos</h3><p>Lembrete 1: toda semana, 8h.</p><p>Lembrete 2: toda semana, 9h.</p><p>Lembrete 3: toda semana, 10h.</p><p>Lembrete 4: toda semana, 11h.</p><p>Lembrete 5: toda semana, 12h.</p><p>Lembrete 6: toda semana, 13h.</p><p>Lembrete 7: toda semana, 14h.</p><p>Lembrete 8: toda semana, 15h.</p><p>Lembrete 9: toda semana, 16h.</p><p>Lembrete 10: toda semana, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span><a class="feitio-button feitio-back-to-top" data-size="small" href="#pg-app-content"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg>Topo</a></div></div></div>
```

## Quando usar

-   Em toda tela de um produto com mais de um lugar para ir: um painel, um admin.

## Quando não usar

-   **Uma página de leitura solta** ou a documentação: só o conteúdo, ou o DocPage.

## Exemplos

### No mobile

Role dentro da moldura e toque em Menu: a gaveta entra pela direita, com a conta e o "Sair" no rodapé dela. No fim do conteúdo, o ScrollFade e o BackToTop.

Mostrar código

```html
<div class="feitio-app-frame">
  <div class="feitio-app">
    <header class="feitio-app-header" data-hide-on-scroll>
      <a class="brand" href="/">Produto</a>
      <button type="button" class="feitio-button menu" data-size="small" popovertarget="menu">Menu…</button>
    </header>
    <nav class="feitio-drawer feitio-app-nav" id="menu" popover aria-label="Principal">…</nav>
    <main class="feitio-app-main" id="conteudo" tabindex="-1">
      …
      <span class="feitio-scroll-fade" aria-hidden="true"></span>
      <a class="feitio-button feitio-back-to-top" data-size="small" href="#conteudo">…Topo</a>
    </main>
  </div>
</div>
```

### Na tela larga

A partir de 64rem de moldura, a gaveta vira a coluna do lado, com o rodapé dela embaixo; o Menu some. O exemplo está reduzido pela metade.

Mostrar código

```html
<!-- o mesmo HTML: a moldura mede a própria largura -->
```

## As regiões

Região

O que vai

`brand`

O nome do produto, levando ao início. Obrigatória.

`actions`

Opcional, no máximo duas peças usadas toda hora. Nunca a conta nem o "Sair".

`menu`

O botão que abre a gaveta, por último, à direita. Some na tela larga.

`nav`

Uma Nav, dentro de um Drawer no mobile.

`nav-footer`

Opcional: quem está dentro, o "Sair", a versão.

`main`

A tela em si, com a tarefa principal primeiro. Traz o ScrollFade e o BackToTop.

## Anatomia

1.  **brand:** leva ao início.
2.  **actions**, opcional: o que se usa toda hora.
3.  **menu:** abre a gaveta, à direita, do lado do polegar.
4.  **main:** a tela em si.

## Estados

-   **Rolando para baixo:** o cabeçalho sobe e sai; rolando para cima, volta. Perto do topo, ou com o foco dentro dele, fica à vista.
-   **Telas grandes:** o conteúdo para em 72rem e fica no centro.

## Bons e maus padrões

Faça assim

A marca e o Menu no cabeçalho; a conta e o "Sair" no rodapé da gaveta.

O que se usa toda hora fica à mão; o resto, guardado.

Não faça

O "Sair" fixo no cabeçalho, ao lado do Menu, em todas as telas.

O lugar mais nobre da tela com a ação menos usada.

## Acessibilidade

-   Regiões de verdade: `<header>`, `<nav>` com nome, `<main>`.
-   O SkipLink é o primeiro item da página.

## Atributos

Atributo

Valores

Para quê

`class="feitio-app-frame"`

em volta

Mede a própria largura e escolhe a forma.

`class="feitio-app"`

obrigatório

O grid das regiões.

`data-hide-on-scroll`

no cabeçalho

Some ao rolar para baixo, no mobile.

`class="feitio-drawer feitio-app-nav"`

com `popover`

Gaveta no mobile, coluna na tela larga.