Kobana UI

Contexto genérico para estado recolhido/expandido de sidebar, com persistência em localStorage e SSR seguro.

Sidebar expandida

Conteúdo principal

Carregando...

Instalação

npx @kobana/ui add sidebar-provider

Dependências instaladas automaticamente: nenhuma (apenas React).

Importação

import {
  SidebarProvider,
  useSidebar,
} from "@/components/kobana/sidebar-provider"

Props

SidebarProvider

Prop	Tipo	Default	Descrição
`children`	`ReactNode`	—	Conteúdo que terá acesso ao contexto da sidebar
`defaultCollapsed`	`boolean`	`false`	Estado inicial caso não haja valor persistido
`storageKey`	`string`	`"kobana-sidebar-collapsed"`	Chave usada no localStorage

useSidebar()

Hook que retorna:

Campo	Tipo	Descrição
`collapsed`	`boolean`	`true` quando a sidebar está recolhida
`setCollapsed`	`(collapsed: boolean) => void`	Define explicitamente o estado
`toggle`	`() => void`	Alterna entre recolhido e expandido

Uso

Básico

// layout.tsx
<SidebarProvider>
  <AppShell />
</SidebarProvider>

// qualquer componente dentro do provider
function CollapseButton() {
  const { collapsed, toggle } = useSidebar()

  return (
    <button
      type="button"
      onClick={toggle}
      aria-pressed={collapsed}
      aria-label={collapsed ? "Expandir sidebar" : "Recolher sidebar"}
    >
      {collapsed ? "→" : "← Recolher"}
    </button>
  )
}

// a sidebar lê o estado e ajusta a largura
function Sidebar() {
  const { collapsed } = useSidebar()
  return <aside className={collapsed ? "w-14" : "w-56"}>{/* ... */}</aside>
}

Com chave e estado inicial customizados

<SidebarProvider storageKey="painel-admin-sidebar" defaultCollapsed>
  <AppShell />
</SidebarProvider>

O estado é persistido em localStorage e sincronizado entre abas via evento storage. A leitura é feita de forma SSR-segura com useSyncExternalStore, evitando mismatch de hidratação: no servidor (e no primeiro render) o valor de defaultCollapsed é usado e, após montar, o valor persistido passa a refletir.

SidebarProvider

On this page