Sidebar
A collapsible app-shell navigation column.
Installation
Included in poetry-ui — available as
poetry_sidebar
the moment you've installed Poetry,
with no per-component step. To own the source and edit it, copy it into your app:
bin/rails g poetry:add sidebar
Default
Open Default standalone
<%# The full app frame (upstream's sidebar hero), with the menus LIVE
via trigger composition: with_trigger(compose: true) yields the
overlay's wiring and the sidebar control wears it - the team
switcher and account rows open real dropdowns, the nav items are
real collapsibles, and each project row carries an action menu. %>
<div class="h-[32rem] w-full overflow-hidden rounded-lg border contain-content [&_[data-slot=sidebar-container]]:h-full [&_[data-slot=sidebar-container]]:absolute">
<%= poetry_sidebar(collapsible: :icon) do |shell| %>
<% shell.with_nav do %>
<%= poetry_sidebar_header do %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_dropdown_menu(side: :right, align: :start, side_offset: 4) do |menu| %>
<% menu.with_trigger(compose: true) do |wiring| %>
<%= poetry_sidebar_menu_button(size: :lg, **wiring) do %>
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
<%= poetry_icon(name: :"gallery-vertical-end", class: "size-4") %>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Acme Inc</span>
<span class="truncate text-xs">Enterprise</span>
</div>
<%= poetry_icon(name: :"chevrons-up-down", class: "ml-auto") %>
<% end %>
<% end %>
<% menu.with_label(class: "text-xs text-muted-foreground") { "Teams" } %>
<% [["Acme Inc", :"gallery-vertical-end", "⌘1"],
["Acme Corp.", :"audio-waveform", "⌘2"],
["Evil Corp.", :command, "⌘3"]].each do |team, logo, key| %>
<% menu.with_item(shortcut: key, class: "gap-2 p-2") do %>
<div class="flex size-6 items-center justify-center rounded-md border">
<%= poetry_icon(name: logo, class: "size-3.5 shrink-0") %>
</div>
<%= team %>
<% end %>
<% end %>
<% menu.with_separator %>
<% menu.with_item(class: "gap-2 p-2") do %>
<div class="flex size-6 items-center justify-center rounded-md border bg-transparent">
<%= poetry_icon(name: :plus, class: "size-4") %>
</div>
<div class="font-medium text-muted-foreground">Add team</div>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_content do %>
<%= poetry_sidebar_group do %>
<%= poetry_sidebar_group_label { "Platform" } %>
<%= poetry_sidebar_menu do %>
<% [["Playground", :"square-terminal", true, %w[History Starred Settings]],
["Models", :bot, false, %w[Genesis Explorer Quantum]],
["Documentation", :"book-open", false, ["Introduction", "Get Started", "Tutorials", "Changelog"]],
["Settings", :"settings-2", false, %w[General Team Billing Limits]]].each do |title, icon, active, subs| %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_collapsible(open: active) do |collapsible| %>
<% collapsible.with_trigger(compose: true) do |wiring| %>
<%= poetry_sidebar_menu_button(active: active, **wiring) do %>
<%= poetry_icon(name: icon) %><span><%= title %></span>
<%= poetry_icon(name: :"chevron-right",
class: "ml-auto transition-transform in-data-open:rotate-90") %>
<% end %>
<% end %>
<%= poetry_sidebar_menu_sub do %>
<% subs.each do |sub| %>
<%= poetry_sidebar_menu_sub_item do %>
<%= poetry_sidebar_menu_sub_button(href: "#") do %><span><%= sub %></span><% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_group do %>
<%= poetry_sidebar_group_label { "Projects" } %>
<%= poetry_sidebar_menu do %>
<% [["Design Engineering", :frame], ["Sales & Marketing", :"chart-pie"], ["Travel", :map]].each do |name, icon| %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#") do %>
<%= poetry_icon(name: icon) %><span><%= name %></span>
<% end %>
<%= poetry_dropdown_menu do |menu| %>
<% menu.with_trigger(compose: true) do |wiring| %>
<%= poetry_sidebar_menu_action(label: "#{name} options", show_on_hover: true, **wiring) do %>
<%= poetry_icon(name: :ellipsis) %>
<% end %>
<% end %>
<% menu.with_item { "View project" } %>
<% menu.with_item { "Share project" } %>
<% menu.with_separator %>
<% menu.with_item(variant: :destructive) { "Delete project" } %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#", class: "text-sidebar-foreground/70") do %>
<%= poetry_icon(name: :ellipsis) %><span>More</span>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_footer do %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_dropdown_menu(side: :right, align: :end) do |menu| %>
<%# Profile photo: the docs' inline-SVG silhouette stands in
(initials show through if it fails); settings gear as the
menu affordance. %>
<% profile = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNjM2NmYxIi8+PHN0b3Agb2Zmc2V0PSIuNTUiIHN0b3AtY29sb3I9IiM4YjVjZjYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlYzQ4OTkiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9InVybCgjZykiLz48Y2lyY2xlIGN4PSIzMiIgY3k9IjI1IiByPSIxMCIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjkiLz48cGF0aCBkPSJNMTIgNjRjMi0xMyAxMC0xOSAyMC0xOXMxOCA2IDIwIDE5eiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjkiLz48L3N2Zz4=" %>
<% menu.with_trigger(compose: true) do |wiring| %>
<%= poetry_sidebar_menu_button(size: :lg, **wiring) do %>
<%= poetry_avatar(src: profile, label: "poetry", class: "size-8 rounded-lg") { "PO" } %>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">poetry</span>
<span class="truncate text-xs">p@example.com</span>
</div>
<%= poetry_icon(name: :settings, class: "ml-auto") %>
<% end %>
<% end %>
<% menu.with_label { "poetry — p@example.com" } %>
<% menu.with_separator %>
<% menu.with_item { "Upgrade to Pro" } %>
<% menu.with_separator %>
<% menu.with_item { "Account" } %>
<% menu.with_item { "Billing" } %>
<% menu.with_item { "Notifications" } %>
<% menu.with_separator %>
<% menu.with_item { "Log out" } %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_rail %>
<% end %>
<% shell.with_inset do %>
<header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
<%= poetry_sidebar_trigger %>
<%= poetry_separator(orientation: :vertical, class: "mr-2 h-4") %>
<%= poetry_breadcrumb do |crumb| %>
<% crumb.with_item("Building Your Application", href: "#") %>
<% crumb.with_item("Data Fetching") %>
<% end %>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50"></div>
</div>
<% end %>
<% end %>
</div>
Loading
Open Loading standalone
<div class="h-96 w-full overflow-hidden rounded-lg border contain-content [&_[data-slot=sidebar-container]]:h-full [&_[data-slot=sidebar-container]]:absolute">
<%= poetry_sidebar(collapsible: :icon) do |shell| %>
<% shell.with_nav do %>
<%= poetry_sidebar_header do %>
<div class="flex items-center gap-2 px-2 py-1">
<%= poetry_skeleton(class: "size-6 rounded-md") %>
<%= poetry_skeleton(class: "h-4 w-24 rounded-md") %>
</div>
<% end %>
<%= poetry_sidebar_content do %>
<%= poetry_sidebar_group do %>
<%= poetry_sidebar_group_label { "Platform" } %>
<%= poetry_sidebar_menu do %>
<%# The real loading surface: per-theme radii ride the theme. %>
<% ["70%", "85%", "55%", "75%", "45%"].each do |width| %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_skeleton(icon: true, text_width: width) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% shell.with_inset do %>
<div class="flex items-center gap-2 border-b p-3">
<%= poetry_sidebar_trigger %>
<%= poetry_skeleton(class: "h-4 w-28 rounded-md") %>
</div>
<div class="p-4 text-sm text-muted-foreground">
Skeleton rows stand in for menu items while navigation loads.
</div>
<% end %>
<% end %>
</div>
Offcanvas collapsed
Open Offcanvas collapsed standalone
<div class="h-96 w-full overflow-hidden rounded-lg border contain-content [&_[data-slot=sidebar-container]]:h-full [&_[data-slot=sidebar-container]]:absolute">
<%= poetry_sidebar(collapsible: :offcanvas, open: false) do |shell| %>
<% shell.with_nav do %>
<%= poetry_sidebar_header do %>
<div class="flex items-center gap-2 px-2 py-1 text-sm font-semibold">Acme Inc</div>
<% end %>
<%= poetry_sidebar_content do %>
<%= poetry_sidebar_group do %>
<%= poetry_sidebar_group_label { "Platform" } %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#", active: true) do %>
<%= poetry_icon(name: :"layout-dashboard") %><span>Dashboard</span>
<% end %>
<% end %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#") do %>
<%= poetry_icon(name: :inbox) %><span>Inbox</span>
<% end %>
<%= poetry_sidebar_menu_badge do %>12<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% shell.with_inset do %>
<div class="flex items-center gap-2 border-b p-3">
<%= poetry_sidebar_trigger %>
<span class="text-sm font-medium">Dashboard</span>
</div>
<div class="p-4 text-sm text-muted-foreground">
The sidebar starts collapsed — the trigger slides it back in.
</div>
<% end %>
<% end %>
</div>
Submenu
Open Submenu standalone
<div class="h-96 w-full overflow-hidden rounded-lg border contain-content [&_[data-slot=sidebar-container]]:h-full [&_[data-slot=sidebar-container]]:absolute">
<%= poetry_sidebar(collapsible: :icon) do |shell| %>
<% shell.with_nav do %>
<%# A menu-button header row - collapse-aware: icon mode clamps to
the tile and hides the text (a bare div would overflow the
collapsed column). %>
<%= poetry_sidebar_header do %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(size: :lg) do %>
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
<%= poetry_icon(name: :"folder-git-2", class: "size-4") %>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Northwind</span>
</div>
<% end %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_content do %>
<%= poetry_sidebar_group do %>
<%= poetry_sidebar_group_label { "Workspace" } %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#") do %>
<%= poetry_icon(name: :"folder-git-2") %><span>Repositories</span>
<% end %>
<%= poetry_sidebar_menu_sub do %>
<%= poetry_sidebar_menu_sub_item do %>
<%= poetry_sidebar_menu_sub_button(href: "#", active: true) do %><span>web-client</span><% end %>
<% end %>
<%= poetry_sidebar_menu_sub_item do %>
<%= poetry_sidebar_menu_sub_button(href: "#") do %><span>api-service</span><% end %>
<% end %>
<%= poetry_sidebar_menu_sub_item do %>
<%= poetry_sidebar_menu_sub_button(href: "#") do %><span>design-system</span><% end %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#") do %>
<%= poetry_icon(name: :"book-open") %><span>Documentation</span>
<% end %>
<%= poetry_sidebar_menu_sub do %>
<%= poetry_sidebar_menu_sub_item do %>
<%= poetry_sidebar_menu_sub_button(href: "#") do %><span>Getting Started</span><% end %>
<% end %>
<%= poetry_sidebar_menu_sub_item do %>
<%= poetry_sidebar_menu_sub_button(href: "#") do %><span>API Reference</span><% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% shell.with_inset do %>
<div class="flex items-center gap-2 border-b p-3">
<%= poetry_sidebar_trigger %>
<span class="text-sm font-medium">Repositories</span>
</div>
<div class="p-4 text-sm text-muted-foreground">
Nested submenus group related routes under a parent entry.
</div>
<% end %>
<% end %>
</div>
User menu
Open User menu standalone
<div class="h-96 w-full overflow-hidden rounded-lg border contain-content [&_[data-slot=sidebar-container]]:h-full [&_[data-slot=sidebar-container]]:absolute">
<%= poetry_sidebar(collapsible: :icon) do |shell| %>
<% shell.with_nav do %>
<%= poetry_sidebar_content do %>
<%= poetry_sidebar_group do %>
<%= poetry_sidebar_group_label { "Platform" } %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#", active: true) do %>
<%= poetry_icon(name: :"layout-dashboard") %><span>Dashboard</span>
<% end %>
<% end %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#") do %>
<%= poetry_icon(name: :"credit-card") %><span>Billing</span>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%# The account row IS the dropdown trigger: compose: true yields
the menu's wiring and the sidebar button wears it; the menu
opens to the right of the collapsed-width footer. %>
<%= poetry_sidebar_footer do %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_dropdown_menu(side: :right, align: :end) do |menu| %>
<% menu.with_trigger(compose: true) do |wiring| %>
<%= poetry_sidebar_menu_button(size: :lg, **wiring) do %>
<%= poetry_avatar(label: "Jamie Doyle") { "JD" } %>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Jamie Doyle</span>
<span class="truncate text-xs text-muted-foreground">jamie@northwind.co</span>
</div>
<%= poetry_icon(name: :"chevrons-up-down", class: "ml-auto") %>
<% end %>
<% end %>
<% menu.with_label { "jamie@northwind.co" } %>
<% menu.with_separator %>
<% menu.with_item { "Account" } %>
<% menu.with_item { "Billing" } %>
<% menu.with_item { "Notifications" } %>
<% menu.with_separator %>
<% menu.with_item { "Log out" } %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% shell.with_inset do %>
<div class="flex items-center gap-2 border-b p-3">
<%= poetry_sidebar_trigger %>
<span class="text-sm font-medium">Dashboard</span>
</div>
<div class="p-4 text-sm text-muted-foreground">
The footer pins the signed-in account with a menu affordance.
</div>
<% end %>
<% end %>
</div>
Workspace switcher
Open Workspace switcher standalone
<div class="h-96 w-full overflow-hidden rounded-lg border contain-content [&_[data-slot=sidebar-container]]:h-full [&_[data-slot=sidebar-container]]:absolute">
<%= poetry_sidebar(collapsible: :icon) do |shell| %>
<% shell.with_nav do %>
<%# The switcher row IS the dropdown trigger: compose: true yields
the menu's wiring and the sidebar button wears it. %>
<%= poetry_sidebar_header do %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_dropdown_menu do |menu| %>
<% menu.with_trigger(compose: true) do |wiring| %>
<%= poetry_sidebar_menu_button(size: :lg, **wiring) do %>
<div class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
<%= poetry_icon(name: :"gallery-vertical-end") %>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Northwind Studio</span>
<span class="truncate text-xs text-muted-foreground">Enterprise</span>
</div>
<%= poetry_icon(name: :"chevrons-up-down", class: "ml-auto") %>
<% end %>
<% end %>
<% menu.with_label { "Workspaces" } %>
<% menu.with_item(shortcut: "⌘1") { "Northwind Studio" } %>
<% menu.with_item(shortcut: "⌘2") { "Northwind Labs" } %>
<% menu.with_separator %>
<% menu.with_item { "Add workspace" } %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= poetry_sidebar_content do %>
<%= poetry_sidebar_group do %>
<%= poetry_sidebar_group_label { "Platform" } %>
<%= poetry_sidebar_menu do %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#", active: true) do %>
<%= poetry_icon(name: :"layout-dashboard") %><span>Overview</span>
<% end %>
<% end %>
<%= poetry_sidebar_menu_item do %>
<%= poetry_sidebar_menu_button(href: "#") do %>
<%= poetry_icon(name: :users) %><span>Members</span>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% shell.with_inset do %>
<div class="flex items-center gap-2 border-b p-3">
<%= poetry_sidebar_trigger %>
<span class="text-sm font-medium">Overview</span>
</div>
<div class="p-4 text-sm text-muted-foreground">
The header hosts a large switcher row for the active workspace.
</div>
<% end %>
<% end %>
</div>
API
Poetry::Ui::Sidebar::Component — options are
constructor keywords (the poetry_* helper forwards them);
slots are composed inside the block. Generated from the gem's source documentation.
| Option | Type | Details | Description |
|---|---|---|---|
| collapsible: | Symbol | one of: offcanvas, icon, none; defaults to :offcanvas |
What collapsing does: slide fully away, shrink to an icon rail, or :none for a static column. |
| open: | Boolean | defaults to true |
The expanded/collapsed state at first paint - feed it from the persisted cookie so there is no collapse flash. |
| side: | Symbol | one of: left, right; defaults to :left |
Which edge the column hangs on. |
| variant: | Symbol | one of: sidebar, floating, inset; defaults to :sidebar |
The column treatment: flush column, floating card, or inset panel. |
Slots
| Writer | Description |
|---|---|
| with_inset | The page area beside the column - rendered as the <main> inset. |
| with_nav | The sidebar column's content (required) - groups, menus, header/footer. |
Styling
Every part carries a stable data-slot attribute — target
[data-slot=…] from your own CSS to restyle it. State rides
data attributes on the parts below. This contract is verified against rendered DOM in CI.
| Part | Description |
|---|---|
| [data-slot=sidebar-wrapper] | The provider shell around the column, the mobile dialog, and the inset |
| [data-slot=sidebar] | The desktop state peer - the collapse state lives here and the pure-CSS group-data chrome keys on it |
| [data-slot=sidebar-gap] | The in-flow width ghost that pushes the inset over - its width animates on collapse |
| [data-slot=sidebar-container] | The fixed-position column itself |
| [data-slot=sidebar-inner] | The flex column receiving the nav slot - the mobile mode adopts its children from here |
| [data-slot=sidebar-mobile] | The mobile sheet <dialog> (below md) - server-rendered empty; the controller adopts the nav children on open |
| [data-slot=sidebar-mobile-inner] | The adoption container the nav children move into while the sheet is open |
| [data-slot=sidebar-inset] | The <main> page area beside the column |
| [data-slot=sidebar-header] | Top block of the column (with_nav content) |
| [data-slot=sidebar-footer] | Bottom block of the column |
| [data-slot=sidebar-content] | The scrollable middle of the column |
| [data-slot=sidebar-group] | One titled section inside the content |
| [data-slot=sidebar-group-label] | The section heading - fades and collapses away in icon mode |
| [data-slot=sidebar-menu] | The <ul> of menu items inside a group |
| [data-slot=sidebar-menu-item] | One <li> menu row (the group/menu-item hover scope) |
| [data-slot=sidebar-menu-button] | The row's link (href:) or button - the navigation entry itself |
| [data-slot=sidebar-menu-action] | The item-corner action button, absolutely positioned in the row |
| [data-slot=sidebar-menu-badge] | The trailing count/status chrome in the row corner - pointer-transparent |
State attributes
| Part | Attribute | Condition | Values |
|---|---|---|---|
| sidebar | data-state | expanded or collapsed - the controller flips it and persists the cookie | — |
| sidebar | data-collapsible | the collapse mode WHILE collapsed (empty while expanded - source parity) | offcanvas · icon · none |
| sidebar | data-variant | the column treatment | sidebar · floating · inset |
| sidebar | data-side | which edge the column hangs on | left · right |
| sidebar-container | data-side | which edge it pins to | left · right |
| sidebar-mobile | data-open | sheet is open (presence flips the pair at runtime) | — |
| sidebar-mobile | data-closed | sheet is closed (the server-rendered state) | — |
| sidebar-mobile | data-mobile | always "true" - the mobile-mode marker | — |
| sidebar-mobile | data-side | which edge the sheet slides from | left · right |
| sidebar-mobile | data-sidebar | always "sidebar" - the suite-wide sub-part marker | — |
| sidebar-menu-button | data-active | the current route (active: - links also get aria-current=page) | — |
| sidebar-menu-button | data-open | when the button is a collapsible's trigger - the disclosure state the collapsible controller flips | — |
| sidebar-menu-button | data-size | the row size variant (default, sm, or lg) - the action/badge tops key on it | — |
| sidebar-menu-button | data-variant | always - the treatment | default · outline |
| sidebar-menu-action | data-sidebar | always "menu-action" - the suite-wide sub-part marker | — |
| sidebar-menu-badge | data-sidebar | always "menu-badge" - the suite-wide sub-part marker | — |
CSS variables
| Part | Variable | Description |
|---|---|---|
| sidebar-wrapper | --sidebar-width | the expanded column width (16rem) - the gap/container geometry reads it |
| sidebar-wrapper | --sidebar-width-icon | the collapsed icon-rail width (3rem) |
| sidebar-mobile | --sidebar-width | overridden inline to the mobile sheet width (18rem) |
Wiring
The Stimulus surface each element carries — declared in the component, verified against rendered DOM in CI. Bare actions fire on the element's default event.
| Element | Controller | Wiring |
|---|---|---|
| root | poetry--core--sidebar | registers · value open · value collapsible |
| peer | poetry--core--sidebar | target sidebar |
| inner | poetry--core--sidebar | target inner |
| mobile | poetry--core--sidebar | closeMobile on cancel · mobileBackdropClose on click · target mobileDialog |
| mobile_inner | poetry--core--sidebar | target mobileInner |
| trigger | poetry--core--sidebar | toggle on click |