Sidebar

Uma barra lateral para layouts de aplicação, montada por partes, que recolhe e se adapta a telas pequenas.

Veja a sidebar num layout completo

O bloco sidebar-01 mostra a barra recolhendo, o atalho Cmd/Ctrl+B e a gaveta no celular.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add sidebar --yes

O item sidebar do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/sidebar_component.rb
app/components/ui/sidebar/provider_component.rb
app/components/ui/sidebar/trigger_component.rb
app/components/ui/sidebar/rail_component.rb
app/components/ui/sidebar/inset_component.rb
app/components/ui/sidebar/input_component.rb
app/components/ui/sidebar/header_component.rb
app/components/ui/sidebar/footer_component.rb
app/components/ui/sidebar/separator_component.rb
app/components/ui/sidebar/content_component.rb
app/components/ui/sidebar/group_component.rb
app/components/ui/sidebar/group_label_component.rb
app/components/ui/sidebar/group_action_component.rb
app/components/ui/sidebar/group_content_component.rb
app/components/ui/sidebar/menu_component.rb
app/components/ui/sidebar/menu_item_component.rb
app/components/ui/sidebar/menu_button_component.rb
app/components/ui/sidebar/menu_action_component.rb
app/components/ui/sidebar/menu_badge_component.rb
app/components/ui/sidebar/menu_skeleton_component.rb
app/components/ui/sidebar/menu_sub_component.rb
app/components/ui/sidebar/menu_sub_item_component.rb
app/components/ui/sidebar/menu_sub_button_component.rb
app/helpers/ui/sidebar_helper.rb
app/javascript/controllers/ui_sidebar_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Envolva a página com ui_sidebar_provider; ele carrega o controller e expõe as larguras como variáveis CSS.

<%= ui_sidebar_provider do %>
  <%= ui_sidebar do %>
    <%= ui_sidebar_content do %>
      <%= ui_sidebar_group do %>
        <%= ui_sidebar_group_label { "Application" } %>
        <%= ui_sidebar_group_content do %>
          <%= ui_sidebar_menu do %>
            <%= ui_sidebar_menu_item do %>

<%= ui_sidebar_provider do %>
  <%= ui_sidebar do %>
    <%= ui_sidebar_content do %>
      <%= ui_sidebar_group do %>
        <%= ui_sidebar_group_label { "Application" } %>
        <%= ui_sidebar_group_content do %>
          <%= ui_sidebar_menu do %>
            <%= ui_sidebar_menu_item do %>
              <%= ui_sidebar_menu_button(tag: :a, href: "#", is_active: true) { "Home" } %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
    <%= ui_sidebar_rail %>
  <% end %>
  <%= ui_sidebar_inset do %>
    <%= ui_sidebar_trigger %>
  <% end %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::Sidebar::ProviderComponent.new do %>
  <%= render Ui::SidebarComponent.new(collapsible: :icon) do %>
    <%= render Ui::Sidebar::ContentComponent.new do %>
      <%= render Ui::Sidebar::MenuComponent.new do %>
        <%= render Ui::Sidebar::MenuItemComponent.new do %>
          <%= render Ui::Sidebar::MenuButtonComponent.new(tooltip: "Home") { "Home" } %>
        <% end %>
      <% end %>

<%= render Ui::Sidebar::ProviderComponent.new do %>
  <%= render Ui::SidebarComponent.new(collapsible: :icon) do %>
    <%= render Ui::Sidebar::ContentComponent.new do %>
      <%= render Ui::Sidebar::MenuComponent.new do %>
        <%= render Ui::Sidebar::MenuItemComponent.new do %>
          <%= render Ui::Sidebar::MenuButtonComponent.new(tooltip: "Home") { "Home" } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <%= render Ui::Sidebar::InsetComponent.new do %>
    <%= render Ui::Sidebar::TriggerComponent.new %>
  <% end %>
<% end %>

Composição

Sidebar::Provider (data-controller="ui-sidebar"; sets the widths as CSS vars)
|-- Sidebar (peer/group; data-state/collapsible/side/variant/mobile)
|   |-- Sidebar::Header  (e.g. a switcher + Sidebar::Input)
|   |-- Sidebar::Content
|   |   `-- Sidebar::Group > Sidebar::GroupLabel + Sidebar::GroupContent
|   |       `-- Sidebar::Menu > Sidebar::MenuItem
|   |           > Sidebar::MenuButton (+ MenuAction / MenuBadge / MenuSub)
|   |-- Sidebar::Footer

Sidebar::Provider (data-controller="ui-sidebar"; sets the widths as CSS vars)
|-- Sidebar (peer/group; data-state/collapsible/side/variant/mobile)
|   |-- Sidebar::Header  (e.g. a switcher + Sidebar::Input)
|   |-- Sidebar::Content
|   |   `-- Sidebar::Group > Sidebar::GroupLabel + Sidebar::GroupContent
|   |       `-- Sidebar::Menu > Sidebar::MenuItem
|   |           > Sidebar::MenuButton (+ MenuAction / MenuBadge / MenuSub)
|   |-- Sidebar::Footer
|   `-- Sidebar::Rail
`-- Sidebar::Inset (Sidebar::Trigger opens/closes; Cmd/Ctrl+B toggles)

Exemplos

Prévia

Uma sidebar fixa (collapsible: :none) com cabeçalho, grupos e menu. O bloco completo, que recolhe e vira gaveta no celular, está em /blocks/sidebar-01.

Acme Inc

Application

Content

<div class="flex h-80 w-full max-w-md overflow-hidden rounded-lg border bg-card text-left"
     style="--sidebar-width: 14rem; --sidebar-width-icon: 3rem; --sidebar-width-mobile: 14rem;">
  <%= ui_sidebar(collapsible: :none, class: "border-r") do %>
    <%= ui_sidebar_header do %>
      <div class="px-2 py-1.5 text-sm font-semibold">Acme Inc</div>
    <% end %>
    <%= ui_sidebar_content do %>
      <%= ui_sidebar_group do %>

<div class="flex h-80 w-full max-w-md overflow-hidden rounded-lg border bg-card text-left"
     style="--sidebar-width: 14rem; --sidebar-width-icon: 3rem; --sidebar-width-mobile: 14rem;">
  <%= ui_sidebar(collapsible: :none, class: "border-r") do %>
    <%= ui_sidebar_header do %>
      <div class="px-2 py-1.5 text-sm font-semibold">Acme Inc</div>
    <% end %>
    <%= ui_sidebar_content do %>
      <%= ui_sidebar_group do %>
        <%= ui_sidebar_group_label { "Application" } %>
        <%= ui_sidebar_group_content do %>
          <%= ui_sidebar_menu do %>
            <% [ [ "Inbox", "inbox", true ], [ "Projects", "folder", false ], [ "Team", "users", false ] ].each do |label, icon, active| %>
              <%= ui_sidebar_menu_item do %>
                <%= ui_sidebar_menu_button(tag: :a, href: "#", is_active: active) do %>
                  <%= ui_icon(icon) %>
                  <span><%= label %></span>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <main class="flex flex-1 items-center justify-center p-4 text-sm text-muted-foreground">
    Content
  </main>
</div>

Referência da API

API	Elemento	Descrição
`ui_sidebar_provider`	`div`	Hospeda o controller `ui-sidebar`; aceita `default_open:` e `cookie_name:`.
`ui_sidebar`	`div`	O painel. Aceita `side:` (`:left`/`:right`), `variant:` (`:sidebar`/`:floating`/`:inset`) e `collapsible:` (`:offcanvas`/`:icon`/`:none`).
`ui_sidebar_trigger`	`button`	Alterna o sidebar (clique ou Cmd/Ctrl+B).
`ui_sidebar_rail`	`button`	Faixa na borda interna que alterna o colapso.
`ui_sidebar_inset`	`main`	Área de conteúdo ao lado do sidebar.
`ui_sidebar_header` / `ui_sidebar_footer`	`div`	Regiões superior e inferior.
`ui_sidebar_content`	`div`	Região rolável com os grupos.
`ui_sidebar_group` / `_group_label` / `_group_content`	`div`	Seção rotulada de menu. O rótulo aceita `tag:`.
`ui_sidebar_group_action`	`button`	Ação fixada no rótulo do grupo; `tag:`.
`ui_sidebar_menu` / `_menu_item`	`ul` / `li`	Lista de itens do menu.
`ui_sidebar_menu_button`	`button`/`a`	`is_active:`, `variant:`, `size:`, `tag:` e `tooltip:` (visível só no modo ícone).
`ui_sidebar_menu_action` / `_menu_badge`	`button` / `div`	Ação e badge fixados à direita do item. A ação aceita `tag:`, e `show_on_hover:` para mostrá-la só com a linha em hover ou foco.
`ui_sidebar_menu_sub` / `_menu_sub_item` / `_menu_sub_button`	`ul` / `li` / `a`	Submenu aninhado. O botão aceita `is_active:`, `size:` e `tag:`.
`ui_sidebar_menu_skeleton`	`div`	Placeholder de carregamento; `show_icon:`.