VendeeDocs
Frontend

Sidebar e Layout

AppLayout, sidebar e navegacao

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

Estrutura

AppLayout = SidebarProvider > AppSidebar + SidebarInset
  • AppLayout — src/components/layout/AppLayout.tsx
  • AppSidebar — src/components/layout/AppSidebar.tsx
  • AppHeader — src/components/layout/AppHeader.tsx

AppSidebar

Usa Sidebar collapsible="icon" com:

  • Header — Team switcher (seletor de workspace)
  • Content — NavMain (items de navegacao)
  • Footer — NavUser (menu do usuario)
  • Rail — Barra lateral para toggle

Definida em src/lib/navigation.ts:

export const mainNavItems: NavItem[] = [
  { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
  { title: "Negocios", 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: "Configuracoes",
  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 navegacao

  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 — Navegacao por caminho

Features

Estrutura features/<domain>/

Backend

Supabase, banco de dados e seguranca

On this page

EstruturaAppSidebarNavegacaoAdicionar novo item de navegacaoAppHeader