Sidebar

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

Uso

Primeiro, crie um componente Sidebar na sua aplicação.

Provider

Depois, adicione SidebarProvider, SidebarTrigger e AppSidebar na raiz da sua aplicação.

import { SidebarProvider, SidebarTrigger } from "@medway-ui/core"
import { AppSidebar } from "@/components/AppSidebar"
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger 
          showTooltip 
          enableHover 
          tooltipContent={{ 
            open: "Esconder sidebar", 
            closed: "Mostrar sidebar" 
          }} 
        />
        {children}
      </main>
    </SidebarProvider>
  )
}

Mobile

Com a janela abaixo de 768px de largura, a Sidebar vira um sheet que abre pelo SidebarTrigger (exceto com collapsible="none"), e o useSidebar passa a usar o openMobile. Quem decide é o hook useIsMobile.

Esse limite é diferente do breakpoint tablet do DS, de 600px (o md: do Tailwind). Ele fica em 768px por compatibilidade com o test-prep-web, que monta o layout de celular nesse valor, e passa para 600px na próxima versão major.

Exemplos

Sidebar com tooltip e efeitos de hover

O componente Sidebar oferece tooltips e efeitos de hover:

• SidebarTrigger: use enableHover para trocar o ícone no hover (ChevronLeft quando aberta, ChevronRight quando fechada)
• SidebarMenuButton: use a prop tooltip para exibir tooltips quando a sidebar está recolhida
• Conteúdo personalizado do tooltip: use a prop tooltipContent no SidebarTrigger para personalizar as mensagens do tooltip

Sidebar com switcher no cabeçalho, efeito de hover no trigger e tooltip

Para ativar o efeito de hover no SidebarTrigger, defina enableHover como true: no hover, ele mostra ChevronLeft quando a sidebar está aberta e ChevronRight quando está fechada. Você também pode personalizar o conteúdo do tooltip passando em tooltipContent mensagens próprias para os estados aberto e fechado.

API

Estrutura da Sidebar

SidebarProvider

O estado de abertura fica no provider, então estas props vão no SidebarProvider (e não na Sidebar). Ele também aceita todas as props de div e alterna a sidebar com Cmd/Ctrl + B.

Sidebar

SidebarMenuButton

SidebarMenuSubButton

SidebarTrigger

SidebarMenuItem

Item (li) de um SidebarMenu. Aceita as props nativas de li.

SidebarMenuAction

Botão de ação posicionado à direita de um SidebarMenuButton, dentro do mesmo SidebarMenuItem. Fica oculto quando a sidebar está recolhida em modo ícone. Aceita as props nativas de button.

SidebarMenuSkeleton

Placeholder de carregamento para um item de menu, com a largura do texto variando entre os itens. Aceita as props nativas de div.

SidebarGroupLabel

Título de um SidebarGroup. Aceita as props nativas de div.

SidebarGroupAction

Botão de ação no canto do título de um SidebarGroup. Aceita as props nativas de button.

useSidebar

Hook que dá acesso ao estado e às ações da sidebar. Só pode ser usado dentro de um SidebarProvider; fora dele, lança um erro.

import { useSidebar } from "@medway-ui/core";
 
const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } = useSidebar();

useIsMobile

Hook que a Sidebar e o DropdownMenuContent usam para decidir o layout de celular. Retorna true com a janela abaixo de 768px de largura e acompanha o redimensionamento. No servidor, retorna false.

import { useIsMobile } from "@medway-ui/core";
 
const isMobile = useIsMobile();

O limite de 768px é diferente do breakpoint tablet do DS (600px) e fica assim por compatibilidade com o test-prep-web. Ele passa para 600px na próxima versão major.