Blips
Documentação

Sidebar

Um componente de sidebar componível, customizável e com suporte a temas.

Carregando…
"use client";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@blips/ui/components/sidebar";
import { Calendar, House, Tray, MagnifyingGlass, Gear } from "@phosphor-icons/react";

const items = [
  { title: "House", icon: House },
  { title: "Tray", icon: Tray },
  { title: "Calendar", icon: Calendar },
  { title: "MagnifyingGlass", icon: MagnifyingGlass },
  { title: "Gear", icon: Gear },
];

export default function SidebarDemo() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  );
}

Instalação

pnpm add @blips/ui

Estrutura

Um componente Sidebar é composto pelas seguintes partes:

  • SidebarProvider - Gerencia o estado de colapso.
  • Sidebar - O contêiner da sidebar.
  • SidebarHeader e SidebarFooter - Fixos no topo e na base da sidebar.
  • SidebarContent - Conteúdo rolável.
  • SidebarGroup - Seção dentro do SidebarContent.
  • SidebarTrigger - Gatilho para a Sidebar.

Uso

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@blips/ui/components/sidebar"
export function AppSidebar() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Aplicação</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton>Início</SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  )
}

Referência da API

SidebarProvider

O componente SidebarProvider gerencia o estado de colapso da sidebar.

PropTipoPadrãoDescrição
defaultOpenbooleantrueO estado aberto padrão
openboolean-O estado aberto controlado
onOpenChange(open: boolean) => void-Callback acionado quando o estado aberto muda

Sidebar

O contêiner principal da sidebar.

PropTipoPadrãoDescrição
side"left" | "right""left"O lado em que a sidebar aparece
variant"sidebar" | "floating" | "inset""sidebar"A variante visual
collapsible"offcanvas" | "icon" | "none""offcanvas"O comportamento de colapso

SidebarMenuButton

PropTipoPadrãoDescrição
asChildbooleanfalseRenderiza como um elemento filho
isActivebooleanfalseSe o item está ativo
tooltipstring | TooltipContentProps-Conteúdo do tooltip para o estado colapsado
variant"default" | "outline""default"A variante visual
size"default" | "sm" | "lg""default"O tamanho
AnteriorSheetPróximoSkeleton