Três menus, três cantos

1 / Menus

Três menus, três papéis

• Sistema — o que eu faço aqui: os destinos de trabalho
• Usuário — quem eu sou, minha conta, aparência e sair
• Legal — o que precisa estar lá: termos, privacidade, contato

2 / Tamanhos

Diferentes, mas do mesmo jeito

• no desktop, o menu abre no lugar, como um cartão sobre a página
• no celular, abre em tela cheia, com título e "Fechar"
• sistema à esquerda, usuário à direita, legal embaixo — nos dois

3 / Espaço

A tela é do conteúdo

• os menus ficam recolhidos nos cantos: sem barra lateral
• o conteúdo usa a largura toda — 240 px devolvidos em toda tela
• o fundo vive mesmo com a página vazia: a tela nunca fica morta

4 / Atalhos

Cada um fixa o que mais usa

• só no largo, onde há espaço — até 5
• ficam à vista com o menu fechado, numa coluna à esquerda
• seguem a ordem do menu
• o alfinete é um botão próprio; a escolha acompanha a conta

5 / Sistema

Cada sistema, o seu rosto

• no canto do sistema, o logo do sistema: o símbolo da Hibex num ladrilho da cor dele
• uma família de cor por sistema — e nunca uma cor de estado
• o mesmo ladrilho vira o favicon da aba e o ícone do aplicativo

Ver os logos de sistema e as famílias → · Os ícones dos menus →

6 / Legal

Coadjuvante, não protagonista

• o menu legal fica no fim da página, não fixo na tela
• só texto, 14 px, cor apagada — sem ícones nem imagens
• sempre lá, sem disputar atenção — na aplicação e na landing

7 / Construção

Feito com o navegador

• um menu = um <dialog popover>; o conteúdo existe uma vez
• no desktop, o gatilho usa popovertarget: Esc e clique fora fecham, o foco não fica preso
• no celular, outro gatilho usa command="show-modal": tela cheia, foco preso, "Fechar"
• item atual com aria-current="page", na cor de link — não verde

O padrão completo, com classes e referência →