# Épico 5 — Menu Lateral — Protótipo (v1.0) **Documentos deste épico:** [01 - Definição](./01%20-%20Defini%C3%A7%C3%A3o%20v1.1.md) (v1.1) · [02 - Especificação](./02%20-%20Especifica%C3%A7%C3%A3o%20v1.1.md) (v1.1) · [03 - Protótipo](./03%20-%20Prot%C3%B3tipo%20v1.0.md) (v1.0, código executável em `03 - Protótipo v1.0.html`) · [04 - Mapeamento de Banco de Dados](./04%20-%20Mapeamento%20de%20Banco%20de%20Dados%20v1.1.md) (v1.1). Este épico faz parte do documento guarda-chuva [Check-in de Usuários](../00%20-%20Guarda-chuva%20v2.14.md). --- ## SEÇÃO 3 — PROTÓTIPO HTML Protótipo funcional único (HTML + CSS + JS inline), mobile-first, cobrindo os touchpoints de ponta a ponta: carregamento do menu (loading), estrutura de grupos com expansão/recolhimento individual, seção Favoritos (favoritar/desfavoritar com reversão em falha), busca em tempo real com árvore achatada e estado vazio, botão Trocar condicionado à quantidade de clínicas acessíveis, comportamento responsivo (recolhido/expandido no desktop, overlay no mobile) e o estado de erro de carregamento com "Tentar novamente". Usa os tokens do Design System (`Design System.md`) diretamente como CSS custom properties, mesmo padrão já usado no protótipo do Épico 6 (`Épico 6 - Seleção de Clínica/03 - Protótipo v1.1.html`). Arquivo: `03 - Protótipo v1.0.html` (código executável, mesma pasta deste documento). ### Itens de menu usados no protótipo (exemplo, não a árvore final) Como registrado na Seção 1 ("Lista consolidada de itens [PROPOSTA]", item 1) e na Seção 4 ("Seeds da Funcionalidade"), a árvore completa de grupos e itens do menu em produção não está disponível para este documento. O protótipo usa uma árvore de exemplo, combinando módulos já especificados em outras partes do projeto com placeholders explicitamente identificados: - Grupo "Assistencial": Central do Médico (Cockpit) e Agenda do Médico — ambos já especificados no projeto (`Central do Médico (Cockpit)`, `Agenda do Médico`). - Grupo "Enfermagem" (placeholder de módulo futuro, ainda sem especificação): Atendimento Oncológico. - Grupo "Farmácia" (placeholder de módulo futuro, ainda sem especificação): Manipulação de Alto Custo. - Grupo "Backoffice" (placeholder de módulo futuro, ainda sem especificação): Faturamento, Contas a Pagar/Receber. - Sem grupo: Meu Perfil (E4, item de menu comum — o protótipo não reimplementa o conteúdo da tela) e "Suporte Gemed" (**[PROPOSTA]**, item de exemplo com destino externo — ver Seção 1 e Seção 4). Nenhum desses nomes deve ser lido como confirmação de que o módulo já existe em produção fora do que já está especificado em seu próprio documento — grupos e itens marcados acima como placeholder são apenas ilustrações de como a estrutura se comportaria quando esses módulos forem especificados. ### Estados contemplados - **Loading:** skeleton no lugar da árvore de grupos, exibido enquanto `GET /api/v1/menu` está em voo. - **Default (desktop expandido):** grupos com itens, seção Favoritos (quando há ao menos um favorito), campo de busca, botão Trocar (quando há mais de uma clínica acessível), rodapé fixo. - **Recolhido (desktop):** só os ícones da seção Favoritos, coluna estreita, conteúdo principal redimensionado (CA-010.7). - **Overlay (mobile):** menu oculto por padrão, abre como camada sobre o conteúdo ao acionar o ícone de abertura, sem redimensionar nada por baixo (CA-010.8). - **Grupo recolhido/expandido:** cada grupo alterna independentemente dos demais (CA-010.9). - **Busca ativa, com resultado:** árvore achatada, mostrando só os itens cujo nome corresponde ao texto digitado (CA-010.4). - **Busca ativa, sem resultado (EX-E5-02):** estado vazio com mensagem MSG-I5-02, orientando limpar o filtro. - **Perfil sem nenhum item (EX-E5-01):** menu vazio com mensagem informativa MSG-I5-01. - **Erro ao carregar o menu (EX-E5-04):** mensagem MSG-E5-03 + botão "Tentar novamente" (MSG-B5-01), sem árvore nem favoritos exibidos. - **Falha ao favoritar/desfavoritar (EX-E5-03):** estrela reverte ao estado anterior ao toque, toast de erro MSG-E5-01. - **Sem botão Trocar:** simulação do caso de exatamente 1 clínica acessível (CA-010.5), em contraste com o caso de mais de 1 (CA-010.6). O mock de JavaScript simula os três endpoints da Seção 2: `GET /api/v1/menu` (carregamento inicial, com alternância entre os cenários de exemplo acima), `POST /api/v1/menu/items/{clientePerfilAcessoProcessoId}/favorite` e `DELETE /api/v1/menu/items/{clientePerfilAcessoProcessoId}/favorite` (favoritar/desfavoritar, incluindo uma simulação de falha para demonstrar EX-E5-03). A busca (RN-CIU-030) é resolvida inteiramente no cliente, filtrando o mesmo conjunto de dados já carregado — sem chamada de rede adicional, conforme descrito na Seção 2. --- ## Histórico de Versões - **v1.0** (15/09/2026) — versão inicial do protótipo. Cobre os 9 critérios de aceitação (CA-010.1 a CA-010.9) e os 4 fluxos de exceção (EX-E5-01 a EX-E5-04) deste épico, com itens de menu de exemplo explicitamente identificados como placeholder, na ausência da árvore completa (mockup original perdido).