cosmemilton-ui/clientLayout & chrome

CmSidebar

Use como navegacao principal de apps internos. Em paginas longas, a navegacao fica presa na viewport e o menu rola internamente quando necessario.

Import

tsx
import { CmSidebar } from "cosmemilton-ui/client";

Navegacao lateral

Exemplo em modo standalone para previews, drawers ou uso dentro de CmAppShell.

tsx
"use client";

import { CmSidebar, type CmSidebarGroup } from "cosmemilton-ui/client";
import { CmBadge } from "cosmemilton-ui/server";

const groups: CmSidebarGroup[] = [
  {
    id: "main",
    label: "Principal",
    defaultOpen: true,
    items: [
      { id: "dashboard", label: "Dashboard", href: "/dashboard" },
      { id: "orders", label: "Pedidos", href: "/pedidos", badge: "12" },
      { id: "clients", label: "Clientes", href: "/clientes" },
    ],
  },
  {
    id: "admin",
    label: "Administracao",
    items: [{ id: "settings", label: "Configuracoes", href: "/configuracoes" }],
  },
];

export default function Example() {
  return (
    <CmSidebar
      standalone
      minHeight={360}
      groups={groups}
      activePathname="/pedidos"
      brand={{ icon: "AA", title: "Acme Admin", subtitle: "Operacao", iconLabel: "Acme Admin" }}
      footer={<CmBadge tone="success">Online</CmBadge>}
    />
  );
}

API rapida

CmSidebar

groupsbrand.icon/title/subtitle/iconLabelactivePathnamelinkComponentcollapsedstandalonetonedensity

Notas

O icone do titulo vem de brand.icon. Passe texto curto como "AA" para iniciais, ou qualquer ReactNode de icone.

Sem brand.icon, o componente usa a primeira letra textual de brand.title como fallback.

Use standalone quando quiser renderizar apenas a navegacao, por exemplo dentro de CmAppShell ou em previews.

Quando CmSidebar recebe children, ele compoe uma shell de duas colunas: sidebar fixa na viewport e conteudo rolando na pagina.