Sidebars
Descrição
As sidebars são elementos de navegação lateral usados para acessar as funcionalidades principais de cada plataforma. Elas se adaptam às necessidades do usuário e oferecem uma experiência consistente, independente da plataforma ou do contexto de uso.
Características Gerais
Altura: Sempre cobre a altura total da tela.
Largura (fechada): 64px (mantém-se compacta para economizar espaço).
Largura (aberta): 240px (exibe as opções de navegação completas).
Cores adaptáveis: Variam de acordo com a plataforma e o tema (exemplo: cores diferentes para o AC Hub e outras plataformas).
Modo responsivo: Possui uma versão para mobile, adaptada para telas menores.
Comportamento
Interatividade:
Ícones clicáveis no modo fechado, com tooltips para melhorar a acessibilidade.
No modo aberto, os nomes das seções são exibidos ao lado dos ícones.
Colapsável:
Expande ou contrai com um clique no botão superior.
Versão mobile:
Menu é exibido como um overlay lateral e pode ser fechado ao clicar fora.
Variações
Compacta (Fechada):
Largura: 64px
Exibe apenas os ícones.
Expandida (Aberta):
Largura: 240px
Exibe ícones acompanhados de textos e subseções.
Mobile:
Exibida como um menu lateral que pode deslizar para entrar ou sair da tela.
Cores:
Variam conforme a identidade visual de cada plataforma.
Exemplo:
AC Hub: Vermelho e bordô.
Outras plataformas: Paletas próprias, como verde ou amarelo.
Regras de Estilo
Ícones:
Devem ser consistentes em tamanho (geralmente 16px).
Espaçamento uniforme entre os ícones no modo fechado.
Área de clique de 32px
Tipografia (modo aberto):
Fonte padrão do Acronos Design System.
Espaçamento:
Entre ícones/texto: 8px.
Casos de Uso
AC Hub:
Sidebar com paleta vermelha.
Usada para exibir navegação de funcionalidades como Cadastro, Usuários e Produtos.
Outras Plataformas:
Sidebar com cores como verde ou amarelo, dependendo da identidade visual.
Mobile:
Oferece navegação simplificada para facilitar o uso em dispositivos menores.