Menu Lateral / Sidebar

• Angular: mds-float-panel
• CSS/HTML (mds-styles): Menu
• Figma: ✅ — abrir Design System 2.0 ↗
• Tipo: Core

Definição Funcional

o Menu/Sidebar é o eixo principal de navegação do sistema, organizando módulos e funcionalidades em uma estrutura hierárquica. Ela permite o acesso rápido às camadas de negócio e alterna o contexto operacional do usuário através de estados fixos ou flutuantes. )

---

Variações e Comportamentos

• Menu Estático (Expandido): Fixado à esquerda, exibe ícones e rótulos. Ideal para resoluções maiores, permitindo navegação rápida entre módulos.
• Menu Estático (Compacto): Exibe apenas ícones para otimizar a área de trabalho. Utilize Tooltips em cada ícone para garantir a clareza.
• Menu Flutuante: Utilizado em dispositivos móveis ou telas reduzidas. Sobrepõe o conteúdo e inclui um cabeçalho com a logo e o botão de fechamento.

---

**Anatomia e Escrita **

Elemento	Sugestão UX Writing (Conciso)	Justificativa
Seletor de Contexto	Unidade de Negócio	Define o escopo operacional e as permissões de dados.
Módulos (Nível 1)	Menu Principal	Estrutura de navegação entre as grandes áreas do sistema.
Seções (Submenu)	Navegação Local	Organiza as páginas internas de um módulo de forma hierárquica.
Rodapé do Menu	Informações do Sistema	Exibe a versão do software e créditos de desenvolvimento.

---

Exemplos de Escrita (Dos & Don’ts)

Contexto	Estilo Prolixo (Original)	Estilo UX (Correto)
Item de Menu	Ver o Dashboard de indicadores	Dashboard
Submenu	Clique para ver os tipos de Sider	Sider

---

Anatomia

1. Seletor Superior: Alternador de Contexto

(Na teoria de Kalbach: Componente de Contexto e Filtro Global)

• Termo para a Documentação: Alternador de Contexto
• Definição: Elemento persistente de nível mais alto que define o contexto de dados sob o qual toda a sessão opera. Não é uma navegação entre páginas em si, mas um modificador do escopo informacional.
• O que entra nesta área:
  • Seleção de Unidade de Negócio, Filial, Empresa ou Workspace ativo.
  • Identificador imediato de “Onde/Em qual contexto estou operando?”.
• Regra de Uso: Qualquer alteração feita aqui atualiza dinamicamente as permissões, os dados carregados na tela atual e a disponibilidade dos módulos na navegação principal.

2. Navegação Global e Navegação Local Combinadas

(Na teoria de Kalbach: Navegação Estrutural Hierárquica) O menu lateral reúne os módulos principais e suas subpáginas em árvore/acordeão, sendo a junção da Navegação Global com a Navegação Local:

2.1. Nível 1 (Módulos fechados): Navegação Global (Global Navigation)

• Termo para a Documentação: Navegação Global
• Definição: Pontos de acesso de nível superior presentes e consistentes em toda a aplicação. Define a amplitude e a fronteira macro do sistema, permitindo que o usuário alterne entre as grandes áreas/produtos da plataforma a qualquer momento.
• O que entra nesta área:
  • Módulos macro do negócio (ex.: Planejamento, Dock Scheduling, Crossdocking, Tracking, Acordos).
  • Telas de visão agregada (ex.: Dashboards).

2.2. Nível 2 (Sub-itens abertos): Navegação Local (Local Navigation)

• Termo para a Documentação: Navegação Local (ou Subnavegação de Módulo)
• Definição: Navegação restrita ao escopo do módulo selecionado na navegação global. Fornece acesso às páginas, fluxos e ferramentas filhas imediatas daquele assunto.
• O que entra nesta área:
  • Páginas e fluxos pertencentes estritamente àquele módulo (ex.: dentro de Dock Scheduling: Agendamentos, Gestão de pátio, Painel de carregamentos, Docas).
• Regra de Uso: Nunca misturar páginas de módulos diferentes; a navegação local deve retratar fielmente a hierarquia de conteúdo subordinada ao nó pai.

3. Navegação Utilitária do Sistema / Navegação Suplementar

(Na teoria de Kalbach: Utility Navigation aplicada à Administração)

• Termo para a Documentação: Navegação Utilitária do Sistema (ou Navegação Suplementar de Configuração)
• Definição: Conjunto de links que dão suporte à operação e manutenção da ferramenta, mas não fazem parte do fluxo de trabalho core/operacional direto do negócio. Fica isolada visualmente para não competir com as tarefas primárias de rotina.
• O que entra nesta área:
  • Parâmetros do sistema, configurações de conta/empresa e ferramentas de bastidor.
  • Exemplo da imagem: Automação, Preferências, Integrações, Cadastros gerais.
• Regra de Uso: Deve ficar ancorada na base da área lateral, separada da lista operacional de módulos, servindo como suporte técnico e administrativo.

4. Bloco Superior Direito: Navegação Utilitária Global

(Na teoria de Kalbach: Utility Navigation pura de topo)

• Termo para a Documentação: Navegação Utilitária Global (ou Ações Utilitárias)
• Definição: Recursos transversais que auxiliam o usuário independentemente de qual página ou módulo ele esteja visualizando. São funções de suporte, comunicação, auxílio cognitivo ou troca de estado de usuário.
• O que entra nesta área:
  • Ajuda e Suporte (FAQ, documentação, chamados).
  • Comunicação e Alertas (mensagens internas, sineta de notificações).
  • Assistentes globais (robô/chat com IA).
  • Alternador de produtos do ecossistema (app switcher / waffle icon).
  • Identificação e menu do perfil de usuário.
• Regra de Uso: Deve ser fixa e onipresente no cabeçalho superior, garantindo acesso instantâneo com um clique sem tirar o foco da página atual.

Resumo para a Tabela de Arquitetura no Design System

Área Destacada	Conceito segundo Kalbach	Classificação para Documentação	Papel Informacional
Topo esquerdo	Scope Control / Context Switcher	Controle de Escopo	Delimita os dados da conta/empresa ativa.
Meio esquerdo (Módulos)	Global Navigation	Navegação Global	Define os macro-módulos e produtos da plataforma.
Meio esquerdo (Sub-itens)	Local Navigation	Navegação Local	Detalha as páginas pertencentes a um módulo ativo.
Base esquerda	Utility / Supplementary Navigation	Navegação Utilitária do Sistema	Configurações, integrações e parâmetros da aplicação.
Topo direito	Global Utility Navigation	Navegação Utilitária Global	Ferramentas de apoio geral: ajuda, avisos, IA e perfil.
)

Visão ao vivo

Storybook mds-styles (HTML/CSS) — components-floatpanel ↗

Storybook mds-angular — components-floatpanel ↗