Padrões
Navegação e página
Três menus, três cantos, iguais em todo sistema Hibex: sistema à esquerda, usuário à direita, legal no fim da página. A tela é do conteúdo.
A ideia
Antes das classes, a ideia em rabiscos, com um exemplo para experimentar: Três menus, três cantos.
Largo, com o menu do sistema aberto
Celular
No celular, o menu abre como diálogo modal em tela cheia, com título e "Fechar".
Faixas de largura
| Faixa | O que muda |
|---|---|
| celular < 48 rem | faixa superior compacta; menus em tela cheia; margem 16 px |
| médio ≥ 48 rem | botões de canto; menus em cartão; margem 24 px |
| largo ≥ 75 rem | e a coluna de atalhos fixados, se houver; margem 32 px |
Um menu, dois gatilhos
Cada menu é um <dialog popover>. No médio e no largo, o gatilho usa popovertarget; no celular, outro gatilho usa commandfor + command="show-modal". O CSS mostra o gatilho da faixa (.hx-only-medium, .hx-only-small); o conteúdo existe uma vez (ADR-0033).
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-app, .hx-app-bar, .hx-app-body, .hx-page(-reading/-wide) | a página e as larguras de conteúdo (45, 62,5, 80 rem) |
.hx-corner(-system/-icon), .hx-avatar | botões de canto (vidro, 44 px) |
.hx-menu(-start/-end) e partes | o menu aberto |
.hx-menu-link[aria-current="page"] | item atual: cor de link, não verde |
.hx-pin[aria-pressed] | alfinete: botão próprio, só no largo |
.hx-pins, .hx-legal, .hx-back, .hx-page-title | atalhos, rodapé legal, voltar, título |
Origem: cap. 02 · ADRs 0017, 0018, 0029, 0033 · desde a versão 0.1.0