Menu mobile de tela cheia · Biblioteca de seções

Painel opaco que cobre a tela inteira deslizando da direita. Marca e botão de fechar no topo, alinhados com a altura do menu fixo; links grandes em display, empilhados com divisória; CTA no pé. Trava o scroll da página enquanto está aberto e devolve o foco ao botão que o abriu.

Quando usar

Sempre que houver um menu fixo que colapsa no mobile. É o par natural do navegacao/nav-fixa-vidro.
Navegação de até 8 itens mais um CTA.

Quando não usar

Navegação com submenus. Este drawer é uma lista plana.
Como painel lateral de filtros ou carrinho — ali você quer overlay parcial e clique-fora, não tela cheia.

Padrão editorial

Slot	Regra
Links	Os mesmos do menu de desktop, na mesma ordem. Divergir entre desktop e mobile é erro, não variação.
CTA	O mesmo do desktop, aqui em botão cheio em vez de pílula pequena.

Como usar

<link rel="stylesheet" href="componentes/navegacao/drawer-fullscreen/estilo.css">
<script src="componentes/navegacao/drawer-fullscreen/script.js"></script>

Cole logo depois do menu fixo. Qualquer elemento da página com [data-drawer-open] passa a abri-lo — não é preciso ligar nada.

Ganchos

Gancho	Papel
`[data-drawer]`	raiz do painel
`[data-drawer-open]`	qualquer gatilho na página
`[data-drawer-close]`	botão de fechar dentro do painel
`.drawer.is-open`	estado aberto

Variações

Abrir pela esquerda — translateX(-100%) no estado fechado.

Gotchas

O hidden no HTML não é decoração. Sem ele, Tab e leitor de tela alcançam os links do menu fechado, que está fora da tela. O script remove o atributo ao abrir e devolve depois da transição.
Um frame entre remover hidden e aplicar .is-open. Sem o requestAnimationFrame, o elemento nasce na posição final e o translate não anima.
O .wrap do topo leva padding-inline:0. É a única exceção à regra do grid em toda a biblioteca: o .drawer já aplicou --pad, e o topo precisa alinhar com o topo do menu fixo. Está documentado no CSS.
A trava de scroll é body.style.overflow. Em iOS isso não impede o rubber band do documento. Se virar problema, troque por position:fixed no body guardando o scrollY — não foi feito porque nunca incomodou em produção.
Sem foco preso (focus trap). Tab sai do painel depois do último link. Aceitável para uma lista de 5 itens com Esc funcionando; se o drawer crescer, vale implementar.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html` e `quem-somos.html`, `#drawer`	2026-08	Origem. Classes `.dl` e `.logo` sem prefixo, `.open` em vez de `.is-open`, ids `#burger`/`#drawerClose` conhecidos pelo script, sem `hidden` (o menu fechado era tabulável), sem devolução de foco, borda `#1e1e1e` crua.

Normalizações aplicadas na extração: prefixo em tudo; .open → .is-open; ids → [data-drawer-open] / [data-drawer-close], o que desacopla o gatilho do painel; adicionado hidden no estado fechado e devolução de foco ao gatilho; borda crua → --rule; escopo de tom explícito no elemento; adicionado prefers-reduced-motion.