Sidebar

Navegação lateral fixa usada em todos os portais (Command Center, Consultant Portal, Seller Portal). Colapsável em modo ícone. Usa o componente AppSidebar de @workspace/ui.

import { SidebarProvider } from "@workspace/ui/components/sidebar";
import { AppSidebar } from "@workspace/ui/components/app-sidebar";

<SidebarProvider defaultOpen={true}>
  <AppSidebar
    items={menuItems}
    title="Centro de Comandos"
    showSearch
    searchPlaceholder="Encontre"
    onSearchOpen={() => setCommandOpen(true)}
    userProfile={{ name: "Ana Paula", role: "Admin", avatarUrl }}
  />
  <SidebarInset>
    <AppHeader menuItems={menuItems} />
    <main>{children}</main>
  </SidebarInset>
</SidebarProvider>

Anatomia (Figma)

Sidebar expandida (191px) e colapsada (~48px) conforme Figma.

Centro de Comandos

Encontre/

Ana Paula

Admin

Estrutura do componente

Composição interna do AppSidebar.

Componente	Classe / Prop	Função
`Sidebar`	collapsible="icon"	Container raiz com modo de colapso
`SidebarHeader`	Logo + título	Cabeçalho com logo Ana Autentic e título do portal
`Search button`	h-8 w-full rounded-md	Abre CommandDialog (atalho /)
`SidebarContent`	mt-2	Área de navegação com NavMain
`NavMain`	items: MenuItems[]	Lista de itens de menu com ícones e labels
`SidebarFooter`	SidebarUserProfile	Perfil do usuário com avatar, nome e role

Dimensões (Figma)

Elemento	Dimensão	Classe Tailwind
Largura (expandida)	191px	`--sidebar-width: 191px`
Largura (colapsada)	~48px	`--sidebar-width-icon: 48px`
Altura	100vh	`h-svh`
Logo	19x19px	`size-4 rounded bg-primary`
Ícones nav	13x13px	`size={13} strokeWidth={1.5}`
Texto nav	13px	`text-sm font-normal`
Texto nav ativo	13px	`text-sm font-medium text-primary`
Avatar footer	27x27px (circle)	`size-7 rounded-full`
Search kbd	14x14px / 9px text	`h-[14px] w-[14px] text-[9px]`

Cores

Tokens de cor da sidebar definidos no tema.

Elemento	Token	Valor
Fundo	`sidebar-background`	#FCFCFC
Borda	`sidebar-border`	#EFEFF3
Item ativo	`primary`	#FF3D8D
Item hover	`sidebar-accent`	#FEE5F1
Texto	`sidebar-foreground`	foreground
Texto secundário	`muted-foreground`	muted-foreground

Comportamento

Ação	Comportamento	Detalhes
Toggle	Alterna entre expandida (191px) e colapsada (48px)	Controlado por SidebarToggle no header
Persistência	Estado salvo em cookie	SidebarProvider persiste via cookie sidebar_state
Mobile	Sheet (off-canvas overlay)	Abre como sheet lateral em telas < md
Busca	Abre CommandDialog	Atalho / ou clique no botão de busca
Colapso	Esconde textos, mostra apenas ícones	collapsible="icon" com transição animada

API Reference

Prop	Type	Default	Descrição
`items`	`MenuItems[]`	—	Array de itens do menu (id, label, href, icon)
`title`	`string`	'Ana Autentic'	Título exibido ao lado do logo
`showSearch`	`boolean`	false	Exibir barra de busca no header da sidebar
`searchPlaceholder`	`string`	'Buscar...'	Placeholder do campo de busca
`onSearchOpen`	`() => void`	—	Callback ao clicar na busca (abre CommandDialog). Se não fornecido, dispara Cmd+J
`userProfile`	`{ name, role, avatarUrl? }`	—	Perfil do usuário para o footer. Se não fornecido, exibe SidebarToggleShortcut
`collapsible`	`'offcanvas' \| 'icon' \| 'none'`	'icon'	Modo de colapso (fixo como 'icon' no AppSidebar)