VendeeDocs
Frontend

Sidebar e Layout

AppLayout, sidebar e navegação

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

Estrutura

AppLayout = SidebarProvider > AppSidebar + SidebarInset
  • AppLayoutsrc/components/layout/AppLayout.tsx
  • AppSidebarsrc/components/layout/AppSidebar.tsx
  • AppHeadersrc/components/layout/AppHeader.tsx

AppSidebar

Usa Sidebar collapsible="icon" com:

  • Header — Team switcher (seletor de workspace)
  • Content — NavMain (itens de navegação)
  • Footer — NavUser (menu do usuário)
  • Rail — Barra lateral para toggle

Definida em src/lib/navigation.ts:

export const mainNavItems: NavItem[] = [
  { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
  { title: "Negócios", url: "/deals", icon: Kanban },
  { title: "Contatos", url: "/contacts", icon: Users },
  { title: "Empresas", url: "/companies", icon: Building2 },
  { title: "Atividades", url: "/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

On this page