AppShell

Estrutura

A moldura de todo sistema interno: menu lateral recolhível, que abre ao passar o mouse, e a coluna de conteúdo. Ctrl+B recolhe e expande; no celular, o menu vira gaveta. Esta página é montada com ele.

Substitui no Brain:ui sidebarAppSidebar

Estrutura

Conteúdo da tela

import {
  AppMain,
  AppShell,
  Logo,
  Sidebar,
  SidebarBrand,
  SidebarFooter,
  SidebarHeader,
  SidebarItem,
  SidebarNav,
  SidebarSection,
  SidebarToggle,
  SidebarUser,
} from "@paytime/ui";
import { Calendar, Home, KanbanSquare } from "lucide-react";

export default function Example() {
  return (
    <AppShell defaultExpanded className="h-[460px] rounded-sm bg-canvas">
      <Sidebar className="h-auto">
        <SidebarHeader>
          <SidebarBrand product="Brain" mark={<Logo markOnly className="size-7" />} />
          <SidebarToggle />
        </SidebarHeader>
        <SidebarNav>
          <SidebarSection label="Atividades">
            <SidebarItem isActive icon={<Home />} label="Início" />
            <SidebarItem icon={<KanbanSquare />} label="Tarefas" />
            <SidebarItem icon={<Calendar />} label="Agenda" />
          </SidebarSection>
        </SidebarNav>
        <SidebarFooter>
          <SidebarUser name="Ana Costa" detail="ana@paytime.com.br" />
        </SidebarFooter>
      </Sidebar>
      <AppMain>
        <main>Conteúdo da tela</main>
      </AppMain>
    </AppShell>
  );
}