AppLayout
Layout de aplicação responsivo com sidebar, header e conteúdo.
Carregando...
Instalação
npx @kobana/ui add app-layoutDependências Kobana: app-sidebar, app-header
Importação
import { AppLayout } from "@/components/kobana/app-layout"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
sidebar | ReactNode | — | Elemento sidebar |
header | ReactNode | — | Elemento header |
children | ReactNode | — | Conteúdo principal |
mobileMenuOpen | boolean | — | Estado do menu mobile |
onMobileMenuOpenChange | (open: boolean) => void | — | Callback do menu mobile |
mobileMenuLabel | string | "Menu de navegação" | Label acessível |
className | string | — | Classes adicionais |
Uso
<AppLayout
sidebar={<AppSidebar navItems={navItems} />}
header={<AppHeader user={user} onSignOut={handleSignOut} />}
mobileMenuOpen={mobileMenuOpen}
onMobileMenuOpenChange={setMobileMenuOpen}
>
{children}
</AppLayout>