Sidebar e Marca

Estrutura visual do topo da sidebar

4 min de leitura ·Atualizado em 28 de abril de 2026

O que é

O topo da sidebar do ConvertaFlow tem dois elementos: o org switcher (que combina a marca da plataforma com a organização do cliente) e a barra de busca (com comportamento adaptativo ao estado colapsado).

Estrutura visual

┌──────────────────────────┐
│ [Logo] ConvertaFlow    ⌄ │  ← marca + ícone oficial (24px)
│         Org do Cliente    │  ← nome da org (subtítulo discreto)
├──────────────────────────┤
│ 🔍 Buscar no sistema... 🤖│  ← input + ícone Lia (IA)
├──────────────────────────┤
│ ...menu de navegação...   │
└──────────────────────────┘

┌────┐
│[CF]│  ← apenas ícone da marca
├────┤
│ 🔍 │  ← apenas lupa (Lia oculta)
├────┤
│ 📊 │
│ 💬 │
│ ...│
└────┘

Org Switcher (TeamSwitcher)

O componente combina marca e organização em um único botão dropdown:

  • Linha 1 — Marca: "ConvertaFlow" em 15.5px bold branco com tracking-tight
  • Linha 2 — Organização: nome da org do cliente em 11px rgba(255,255,255,0.55) — discreto, legível
  • Ícone: símbolo oficial da marca (arco C + gota âmbar) em 24px dentro de container 32px com fundo rgba(255,255,255,0.15)
  • Fundo do botão: bg-white/10 no estado normal, bg-white/[0.18] no hover e open — consistente com os itens do menu
  • Chevron: indicador de dropdown alinhado à direita
  • Badge numérico: aparece quando o usuário tem 2+ organizações

Ao clicar, abre dropdown com a lista de organizações para troca (multi-tenant).

Ícone oficial (v3 corrected 3)

Icone com fundo gradiente azul no sidebar, composto por:

  • C aberto branco (convergência de canais)
  • Helice ambar #FC9E1C (fluxo de conversão)
  • Fundo gradiente #1E7FD4 → #1A3A6E (diagonal)

3 variantes disponíveis no componente BrandIcon:

  • default — fundo gradiente azul (sidebar, favicon, notificações)
  • transp15 — fundo branco 15% opacidade (uso futuro)
  • transparent — sem fundo (tela de login sobre gradiente)

Arquivos fonte: frontend/public/brand/icon-gradient.svg, icon-transp15.svg, icon-transparent.svg

Barra de busca

Expandida

  • Input com placeholder "Buscar no sistema..."
  • Ícone Lia (IA) à direita quando não há texto digitado
  • Suporta busca de páginas, contatos e tickets
  • Atalho Ctrl+K / Cmd+K para focar

Colapsada

  • Exibe apenas o ícone da lupa centralizado (32x32px)
  • Lia (IA) fica oculta
  • Ao clicar na lupa, expande o sidebar automaticamente e foca no input

Decisões de design

  1. Marca e org fundidos em um único bloco — elimina um bloco inteiro (~44px), reduzindo o "peso" do header. Padrão usado por Slack, Notion, Linear
  2. Símbolo sem fundo foi escolhido porque a sidebar já tem fundo azul escuro — usar o ícone com fundo próprio criaria redundância visual
  3. Nome da org em branco com opacidade ao invés de laranja #fc9e1c — o laranja em 10-11px sobre azul escuro tinha baixo contraste e era ilegível. Branco 55% é discreto e legível
  4. Hierarquia tipográfica — marca 15.5px bold > org 11px medium = ratio 1.4:1, dentro da escala recomendada
  5. Busca colapsada mostra só lupa — Lia (IA) não cabe no modo ícone e adicionaria ruído visual

O footer do sidebar contem dois botoes fixos + perfil do usuário:

Sugerir Melhorias

  • Botao com destaque visual: fundo ambar claro #fef3c7, texto marrom #92400e
  • Hover: fundo #fde68a, texto #78350f
  • Icone: lâmpada (LightbulbIcon)
  • Direciona para o módulo próprio /suggestions (deixou de ser aba da Central de Ajuda em 2026-04-04)
  • Pagina abre com formulario de 2 colunas: campos a esquerda (nome, email, sugestão, links de referência, anexos) + painel lateral com dicas de "O que rende uma boa sugestão" e "Como tratamos sua sugestão"
  • Objetivo: incentivar usuários a enviar feedback e sugestões de melhoria

Central de Ajuda

  • Botao padrão do sidebar: texto #a8d4f5, icone interrogação
  • Direciona para a Central de Ajuda (documentação)

Perfil do usuário

  • Nome, email e avatar do usuário logado
  • Dropdown com opções de perfil e logout

Arquivos envolvidos

Arquivo Responsabilidade
frontend/src/components/team-switcher.tsx Org switcher com marca + org + dropdown
frontend/src/components/sidebar-search.tsx Busca adaptativa (expandida/colapsada)
frontend/src/components/app-sidebar.tsx Layout do sidebar (header, content, footer)
frontend/src/components/brand/BrandIcon.tsx Componente icone oficial (3 variantes)
frontend/public/brand/ Arquivos SVG fonte do icone

Este artigo foi útil?