CmSidebar
Layout lateral autocontido com menu recolhível.
Import
Caminho público recomendado para este componente.
import {
CmBadge,
CmButton,
CmCard,
CmGrid,
CmGridContainer,
CmIcon,
CmRow,
CmSidebar,
CmStack,
CmText,
type CmSidebarGroup
} from "cosmemilton-ui";CmSidebar é autocontido: ele renderiza o painel lateral, a área de conteúdo, o espaçamento, o colapso, a prévia e a responsividade.
groups não é string[]: use CmSidebarGroup[] no formato { id, label, icon?, items, active?, defaultOpen?, direct? }.
items usa CmSidebarItem[] no formato { id, label, href?, to?, icon?, active?, isActive?, disabled?, badge?, onSelect? }.
Use href para navegação nativa e to com linkComponent para roteadores como React Router ou Next.
Use onSelect para ações controladas pelo estado do consumidor. Se usar link e onSelect, onSelect roda antes da navegação.
active marca o item atual manualmente; activePathname e isActive calculam o estado ativo a partir da rota.
disabled bloqueia a interação. badge aceita qualquer ReactNode, como CmBadge.
direct transforma um grupo em link direto. Quando direct não é informado, grupos com um único item já são diretos por padrão.
brand controla apenas os pontos seguros do cabeçalho: icon, title, subtitle e fallbackTitle. O footer é o slot livre para conteúdo auxiliar.
Subitens longos têm rolagem interna por padrão; ajuste groupItemsMaxHeight e lastGroupItemsMaxHeight quando o produto precisar de outros limites.
Por padrão, o menu recolhe abaixo de 1180px e abre uma prévia ao passar o mouse ou focar o painel.
Menu lateral autocontido
O componente ajusta o conteúdo, recolhe sozinho e mantém header, grupos e footer dentro da própria biblioteca.
React Router sem reload
Passe NavLink ou Link em linkComponent, use to nos itens e derive o estado ativo com activePathname/isActive.
Uso em SPA
A navegação client-side fica no roteador; o sidebar repassa as props de navegação para o linkComponent.