Componentes/Header Desktop

Header Desktop

Barra de navegação superior da plataforma TRDR — 56px de altura, logo, nav principal, busca de ativos, cotações em tempo real, botões de ação, status de conexões e controles de janela.

Navegação

Figma: 1921:55292

Preview

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Header Desktop — Design System TRDR (Figma: 1921:55292) -->
<!-- Adicionar .trdr-header-nav-item-active no item ativo -->
<header class="trdr-header">
  <div class="trdr-header-left">
    <!-- Logo — SVG inline do logo TRDR 45° -->
    <div class="trdr-header-logo">
      <svg width="107" height="42" viewBox="0 0 107 42" fill="none" aria-label="TRDR"><!-- logo-trdr-45graus.svg inline --></svg>
    </div>
    <div class="trdr-header-divider"></div>

    <!-- Nav principal -->
    <nav class="trdr-header-nav">
      <button class="trdr-header-nav-item trdr-header-nav-item-active" type="button">
        <span class="trdr-header-nav-icon material-symbols-outlined">show_chart</span>
        Gráfico
      </button>
      <button class="trdr-header-nav-item" type="button">
        <span class="trdr-header-nav-icon material-symbols-outlined">format_list_bulleted</span>
        Book e Cotações
      </button>
      <button class="trdr-header-nav-item" type="button">
        <span class="trdr-header-nav-icon material-symbols-outlined">swap_horiz</span>
        Operação
      </button>
    </nav>

    <!-- Busca — reutilizar TextInput -->
    <div class="trdr-text-input trdr-text-input-with-icon" style="width:116px">
      <input type="text" placeholder="Buscar ativo..." />
    </div>
  </div>

  <div class="trdr-header-right">
    <!-- Ícone com badge -->
    <div style="position:relative;display:inline-flex">
      <button class="trdr-header-icon-btn" type="button" aria-label="Notificações">
        <span class="material-symbols-outlined" style="font-size:20px">notifications</span>
      </button>
      <span class="trdr-header-badge">4</span>
    </div>

    <!-- Conexões -->
    <button class="trdr-header-conexoes" type="button">
      <span class="trdr-header-status-dot connected"></span>
      5/6 Conexões
    </button>

    <!-- Controles de janela — SVGs customizados 18×18 -->
    <div class="trdr-header-wincontrols">
      <button class="trdr-header-win-btn" aria-label="Minimizar" type="button">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M14.25 9.75H3.75V8.25H14.25V9.75Z" fill="currentColor"/></svg>
      </button>
      <button class="trdr-header-win-btn" aria-label="Restaurar" type="button">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M13.7813 3.9375C14.1542 3.9375 14.5119 4.08566 14.7756 4.34938C15.0393 4.6131 15.1875 4.97079 15.1875 5.34375V12.375H13.7813V5.34375H6.75V3.9375H13.7813ZM5.34375 8.15625V13.7813H10.9688V8.15625H5.34375ZM5.34375 6.75H10.9688C11.3417 6.75 11.6994 6.89816 11.9631 7.16188C12.2268 7.42561 12.375 7.78329 12.375 8.15625V13.7813C12.375 14.1542 12.2268 14.5119 11.9631 14.7756C11.6994 15.0393 11.3417 15.1875 10.9688 15.1875H5.34375C4.97079 15.1875 4.6131 15.0393 4.34938 14.7756C4.08566 14.5119 3.9375 14.1542 3.9375 13.7813V8.15625C3.9375 7.78329 4.08566 7.42561 4.34938 7.16188C4.6131 6.89816 4.97079 6.75 5.34375 6.75Z" fill="currentColor"/></svg>
      </button>
      <button class="trdr-header-win-btn trdr-header-win-btn-close" aria-label="Fechar" type="button">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M14.0171 3.9909C13.7065 3.68032 13.2048 3.68032 12.8942 3.9909L9 7.87713L5.1058 3.98294C4.79522 3.67235 4.29352 3.67235 3.98294 3.98294C3.67235 4.29352 3.67235 4.79522 3.98294 5.1058L7.87713 9L3.98294 12.8942C3.67235 13.2048 3.67235 13.7065 3.98294 14.0171C4.29352 14.3276 4.79522 14.3276 5.1058 14.0171L9 10.1229L12.8942 14.0171C13.2048 14.3276 13.7065 14.3276 14.0171 14.0171C14.3276 13.7065 14.3276 13.2048 14.0171 12.8942L10.1229 9L14.0171 5.1058C14.3197 4.80319 14.3197 4.29352 14.0171 3.9909Z" fill="currentColor"/></svg>
      </button>
    </div>
  </div>
</header>

Dimensões

Variante	Largura	Altura
Altura	`100%`	`56px`
Nav item	`auto`	`40px`
Botão de ícone	`32px`	`32px`
Conexões btn	`137px`	`32px`
Badge	`auto (min 14px)`	`14px`
Divider vertical	`1px`	`18px`

Props / Variantes

Prop	Tipo	Valores
`activeNav`	string	`GráficoBook e CotaçõesOperaçãoFerramentasAnalistas`

Tokens Utilizados

Propriedade	Token	Valor
Background	`bg.primary`	`#0E0E0E`
Border bottom	`border.subtle`	`#222222`
Padding horizontal	`spacing.lg`	`16px`
Nav item — texto default	`content.tertiary`	`#A4A4A4`
Nav item — texto hover/active	`content.primary`	`#FFFFFF`
Nav item — BG hover	`surface.secondary`	`#222222`
Ícone botão	`content.secondary`	`#E8E8E8`
Badge BG	`action.brand.default`	`#00D4FF`
Badge texto	`content.inverse`	`#1A1A1A`
Conexões border	`border.subtle`	`#222222`
Status dot — conectado	`context.trading.up`	`#4FE290`
Status dot — desconectado	`context.trading.down`	`#F34F45`
Win btn close hover	`context.trading.down`	`#F34F45`
Resultado — alta	`context.trading.up`	`#4FE290`
Resultado — baixa	`context.trading.down`	`#F34F45`

Anatomia

Header (flex row, space-between, height 56px, padding 0 16px, bg-primary, border-bottom subtle):
  LEFT: [Logo 107×40] [Divider 1×18] [Nav itens gap-16 — cada item: 40px h, 8px H-pad, ícone 20px + label 14px] [TextInput 116×32 com ícone busca] [Resultado Row — cotações gap-0]
  RIGHT: [4× icon-btn 32×32 + badge absoluto] [Conexões btn 137×32, borda subtle, status dot] [Win Controls 3× 40×40]

Notas

Componente de 1920px de largura — ocupa 100% da viewport na plataforma. O preview é scrollável horizontalmente. Na platform real, reutiliza TextInput (busca) e FloatingMenu (dropdowns dos itens de nav).