CRMAppy Docs Menu Lateral
v0.1.6
🗂️ Capítulo 02

Menu Lateral

A barra de navegação principal do CRMAppy — ponto de acesso a todos os módulos do sistema, com comportamento inteligente que se adapta ao uso no desktop e mobile.

📋 Visão Geral

O Menu Lateral (Sidebar) é o painel fixo à esquerda da tela, presente em todas as páginas do sistema. É por ele que o usuário navega entre os módulos do CRMAppy.

No desktop, o menu tem comportamento inteligente: recolhe e expande automaticamente conforme o mouse passa sobre ele, ou pode ser fixado em um dos três modos de expansão | | disponíveis. No mobile, aparece como painel deslizante acionado pelo botão de menu.

🖥️ Anatomia do Menu

⚙️ Modos de Comportamento e Retração (Desktop)

No desktop, o menu principal possui um sistema inteligente de 3 modos de comportamento configuráveis pelo utilizador. Isto permite controlar com precisão o espaço horizontal disponível na tela e a legibilidade dos nomes dos módulos.

Automático (Hover)
Padrão do sistema (`auto`)
O menu permanece retraído no estado inicial (exibindo apenas os ícones em largura compacta de 56px). Ao posicionar o ponteiro do rato sobre o menu (evento onMouseEnter), ele expande-se de forma fluida para 224px (w-56). Ao retirar o rato (onMouseLeave), ele encolhe-se de volta ao tamanho compacto automaticamente.
Gatilho: PanelRight (Ícone ▷)
Sempre Aberto
Fixo Expandido (`open`)
O menu trava no modo expandido em 224px. Os ícones, nomes dos módulos e badges ficam permanentemente visíveis ao lado dos seus respetivos ícones. Os eventos de passar o rato (hover) são ignorados pois a barra já se encontra na sua largura total de trabalho, ideal para ecrãs de alta resolução.
Gatilho: PanelLeft (Ícone ◁)
◀✕
Sempre Fechado
Fixo Retraído (`closed`)
O menu trava no estado compacto em 56px. Mesmo ao passar o rato sobre a barra lateral, ela não se expande horizontalmente. Para identificar o módulo, basta posicionar o cursor sobre o ícone correspondente para disparar o balão de dica nativo (tooltip). Maximiza o foco na área de trabalho principal.
Gatilho: PanelLeftClose (Ícone ◀✕)
💾 Persistência de Preferência e Ciclo

A troca entre os três modos de exibição é sequencial e circular. Ao clicar no botão de controlo no topo do menu lateral, o sistema alterna no ciclo: Automático ➔ Sempre Aberto ➔ Sempre Fechado ➔ Automático.

Esta preferência é salva instantaneamente no navegador do utilizador sob a chave 'sidebar-mode' do localStorage, sendo restaurada de forma idêntica em todos os logins seguintes.

🧩 Itens de Navegação

O menu é organizado em três blocos hierárquicos: Menu (acesso principal), Add-ons (módulos complementares) e Config (visível apenas para administradores).

⚠️ Itens exclusivos de Admin Os itens Hub de Gestão e Configurações aparecem somente para usuários com perfil admin. Usuários com perfil editor ou user não visualizam esses itens no menu.

👤 Rodapé do Menu

A parte inferior do menu contém controles de sessão e preferências de tema.

📱 Comportamento no Mobile

No mobile o menu funciona de forma diferente: Fica oculto por padrão e desliza da esquerda quando acionado pelo botão de menu no cabeçalho da página. Os 3 modos (automático / aberto / fechado) são exclusivos do desktop — no mobile o controle é simples: aberto ou fechado.

🎨 Temas Disponíveis

O CRMAppy oferece três temas. O botão no rodapé do menu alterna entre eles em ciclo. O menu lateral se adapta visualmente a cada um.

💡 Ciclo de alternância O botão no rodapé do menu alterna sempre para o próximo tema: Claro → Escuro → Sépia → Claro. O rótulo do botão mostra sempre o próximo tema, não o atual. A preferência é salva automaticamente.