Layout
O shell da página — header (app bar azul, navegação horizontal), rails laterais opcionais, toolbar, main e footer.
Layout, usado no código como <MeLayout>. É a casca de uma tela inteira do ME. No Figma, use o bloco da Library; não remonte a estrutura de rails à mão.O Layout é o shell que envolve qualquer tela do ME: o header (app bar azul me-brand, com a navegação principal HORIZONTAL no topo), o nav rail lateral opcional (5.5rem — atalhos, não o menu de áreas), os rails esquerdo/direito (sidebar de escopos, painéis — redimensionáveis e colapsáveis), a toolbar (onde mora o Subheader), o main e o footer. Em telas pequenas, os rails viram slideover.
Composição
| Zona | O que é |
|---|---|
| Header | App bar azul me-brand full-width: marca "me." à esquerda, navegação principal horizontal (áreas) no topo, transversais + avatar à direita. É aqui que fica o menu de áreas. |
| Nav rail | Rail lateral estreito opcional (5.5rem) — atalhos por etapa/rodada. Não é o menu de áreas (esse é horizontal, no header). |
| Rail esquerdo | Sidebar de escopos/filtros da entidade (colapsável). |
| Toolbar / main | Subheader no topo + a área de conteúdo da tela. |
| Rail direito | Painéis contextuais (Genius, detalhes, preview). |
| Footer | Rodapé global (só tablet/mobile). |
Variantes & responsivo
Os rails laterais são redimensionáveis e colapsáveis — o usuário ajusta o espaço de trabalho sem perder conteúdo. Em telas pequenas, os rails deixam de ocupar coluna e abrem como slideover sobre o conteúdo (foco entra no painel, Esc fecha) — assim o main continua legível no mobile.
Onde se aplica
No código
<MeLayout> é um bloco EletroDS. Doc técnica em eletro.design/blocks/layout. Aqui o foco é o uso em Design.
Slots (mapa das zonas): #header (app bar) · #nav-area (nav rail opcional) · #toolbar (Subheader) · #left-area (sidebar de escopos) · #default (conteúdo) · #right-area (transversais: Mensagens/Genius/Carrinho — só desktop; no mobile viram drawer da direita) · #footer (nav bar inferior, só tablet/mobile). Preencha só os slots que a tela usa.
Gotchas (verificados na index real): o MeLayout usa h-screen — dentro de um preview/embed com altura própria, force :deep(.me-layout){ height:100% !important }. O header do MeLayout fica em z-[10000] → overlays/drawers contidos precisam ficar acima (ex.: 10001).
Acessibilidade
- Cada zona é um landmark semântico:
header,nav,main,aside(rails) efooter— ummainpor tela. - Skip-link "Pular para o conteúdo" como primeiro foco, levando ao
main. - Rails que abrem como slideover (mobile/contexto) gerenciam foco: foco entra no painel,
Escfecha e devolve o foco ao gatilho. - Ordem de leitura/tabulação coerente com a hierarquia visual; nada de navegação só por cor.