Headers/Navbars

Descrição

As headers/navbars são componentes de navegação horizontal posicionados no topo da tela. Elas permitem o acesso rápido às principais funcionalidades e informações, adaptando-se ao contexto e às diferentes plataformas (desktop e mobile).

Características Gerais

• Altura fixa:

  • Desktop/Mobile: 60px.

• Responsividade: Totalmente ajustável para telas menores, com elementos reorganizados para otimizar o espaço.

• Cores:

  • Paleta personalizada para cada plataforma (exemplo: bordas, ícones e elementos visuais podem variar conforme a identidade visual da aplicação).

• Identidade visual clara: Inclui o logo ou nome da aplicação.

Comportamento

1. Modo Desktop:

   • Logo/título da aplicação: Alinhado à esquerda.

   • Elementos de navegação:

     • Ícones de funções principais, como notificações, mensagens, e favoritos, localizados no centro ou próximos ao título.

   • Menu do usuário:

     • Localizado no canto direito, exibe o avatar, nome do usuário e a empresa associada.

     • Ao clicar, expande um menu suspenso com opções, como Meu Perfil, Configurações e Suporte.

2. Modo Mobile:

   • Menu colapsado:

     • Ícone de menu hamburguer substitui a navegação completa, exibindo-a em um overlay quando clicado.

   • Elementos simplificados:

     • Apenas os ícones mais essenciais (ex.: pesquisa, notificações, e avatar do usuário) permanecem visíveis.

   • Menu do usuário:

     • Similar ao desktop, mas com um design vertical ao expandir.

Variações

1. Desktop:

   • Simples:

     • Exibe apenas o título da aplicação e os ícones de ações principais.

   • Com menu do usuário:

     • Inclui o avatar e o nome do usuário.

   • Com pesquisa:

     • Campo de busca centralizado ou alinhado à direita.

2. Mobile:

   • Compacta:

     • Ícones básicos e menu lateral colapsado.

   • Com menu expandido:

     • Sobrepõe a tela para exibir todas as opções de navegação.

Regras de Estilo

• Tipografia:

  • Título da aplicação: 16px, negrito.

  • Menu do usuário: 14px, regular.

• Espaçamento:

  • Entre ícones: 16px.

  • Entre avatar/nome e o menu suspenso: 8px.

• Cores:

  • Devem seguir a mesma lógica de paletas da sidebar

Casos de Uso

1. ACHUB:

   • Header com campo de pesquisa centralizado e ícones de mensagens/notificações.

   • Menu do usuário com detalhes da empresa associada.

   • Versão compacta para mobile, com menu lateral expansível.

2. Minha Loja:

   • Ícones de ação priorizados, como pesquisa e notificações.

3. Outras Plataformas:

   • Adaptação de cores e elementos conforme a identidade visual.