Header

Barra superior fixa (sticky) com breadcrumb, ações e botão de adicionar. Altura de 40px (h-10). Componente AppHeader de @workspace/ui.

import { AppHeader } from "@workspace/ui/components/app-header";

// Dentro do SidebarInset:
<SidebarInset className="flex h-screen flex-col overflow-hidden">
  <AppHeader menuItems={menuItems} />
  <main className="flex-1 overflow-auto bg-background">
    {children}
  </main>
</SidebarInset>

Header padrão (Figma)

Header conforme Figma, com toggle sidebar, breadcrumb simples e ações à direita. Largura 1249px (viewport - sidebar).

Header com breadcrumb

Navegação hierárquica quando o usuário está em uma sub-página.

Estrutura do componente

Composição interna do AppHeader.

Componente	Classe / Prop	Função
`header`	sticky top-0 z-20 h-10 border-b	Container principal fixo no topo
`SidebarTrigger`	md:hidden	Hamburger menu para mobile (abre sheet)
`SidebarToggle`	hidden md:flex	Botão toggle sidebar para desktop (ícone muda conforme estado)
`HeaderBreadcrumb`	menuItems	Breadcrumb gerado automaticamente a partir da URL e menuItems
`HelpCircleIcon`	hidden md:inline-flex	Botão de ajuda (visível apenas em desktop)
`Notification01Icon`	sempre visível	Botão de notificações
`Settings01Icon`	hidden md:inline-flex	Botão de configurações (visível apenas em desktop)
`Add01Icon`	h-7 w-7 rounded-full bg-primary	Botão primário de adicionar (sempre visível)

Dimensões (Figma)

Elemento	Dimensão	Classe Tailwind
Altura total	40px	`h-10`
Largura	1249px (viewport - sidebar)	`flex-1` (dentro do SidebarInset)
Botões de ação	32x32px (circle)	`h-8 w-8 rounded-full`
Ícones de ação	18px	`size={18} strokeWidth={1.5}`
Botão Adicionar	28x28px (circle)	`h-7 w-7 rounded-full bg-primary`
Ícone Adicionar	14px / stroke 2	`size={14} strokeWidth={2}`
Borda inferior	1px	`border-b border-sidebar-border`
Posição	Sticky	`sticky top-0 z-20`
Padding horizontal	16px	`px-4`

Ícones usados (Hugeicons)

Ícones do header conforme Figma, com visibilidade responsiva.

Função	Hugeicon	Visibilidade
Toggle sidebar	`SidebarLeft01Icon / SidebarRight01Icon`	Desktop (md+)
Hamburger mobile	`SidebarTrigger` (shadcn)	Mobile (< md)
Ajuda	`HelpCircleIcon`	Desktop (md+)
Notificações	`Notification01Icon`	Sempre
Configurações	`Settings01Icon`	Desktop (md+)
Adicionar	`Add01Icon`	Sempre

API Reference

Prop	Type	Default	Descrição
`menuItems`	`MenuItems[]`	—	Itens do menu para gerar o breadcrumb automaticamente via HeaderBreadcrumb
`user`	`{ name?, email, avatarUrl? }`	undefined	Dados do usuário (reservado para uso futuro)