Sidebar e Layout

O layout segue o padrão oficial de sidebar do shadcn/ui.

Estrutura

AppLayout = SidebarProvider > AppSidebar + SidebarInset

• AppLayout — src/components/layout/AppLayout.tsx
• AppSidebar — src/components/layout/Sidebar.tsx (o arquivo se chama Sidebar.tsx e exporta AppSidebar)`
• AppHeader — src/components/layout/AppHeader.tsx

AppSidebar

Usa Sidebar collapsible="icon" com:

• Header — logo do Vendee + nome do workspace ativo, em texto. Não há mais troca de workspace pela sidebar (1 login = 1 workspace).
• Content — NavMain (itens de navegação)
• Footer — NavUser (menu do usuário)
• Rail — Barra lateral para toggle

Navegação

Definida em src/lib/navigation.ts:

export const mainNavItems: NavItem[] = [
  { title: "Dashboard", url: ROUTES.dashboard, icon: LayoutDashboard },
  { title: "Negócios", url: ROUTES.deals, icon: Kanban },
  { title: "Contatos", url: ROUTES.contacts, icon: Users },
  { title: "Empresas", url: ROUTES.companies, icon: Building2 },
  { title: "Atividades", url: ROUTES.activities, icon: CalendarCheck },
];

export const settingsNavItem: NavItem = {
  title: "Configurações",
  url: "/settings",
  icon: Settings,
  items: [
    { title: "Empresa", url: "/settings/empresa", icon: Building },
    { title: "Equipe", url: "/settings/equipe", icon: UserCog },
    // ... 8 sub-items
  ],
};

Adicionar novo item de navegação

1. Adicione o item em src/lib/navigation.ts
2. O NavMain renderiza automaticamente usando SidebarMenu
3. Sub-items usam Collapsible para expandir/recolher

AppHeader

Composto por:

• SidebarTrigger — Toggle da sidebar
• Separator — Divisor visual
• Breadcrumb — Navegação por caminho

As URLs vêm de ROUTES

☠️ As rotas do app são em português (/negocios, /contatos, /empresas, /atividades) e nunca são escritas à mão no menu — saem da constante ROUTES em src/lib/constants.ts. Rota nova entra lá primeiro.

Os quatro grupos da sidebar

O menu é montado por grupo, e cada grupo aparece conforme papel e flags do workspace: