Layout Sidebar
Structural layout primitives for dashboard shells with a sidebar and main content column.
Accessibility: layout primitive only — no interactive role. Place focusable navigation elements (links, buttons) directly inside bloc-sidebar.
Basic
Sidebar Shell
Two-column grid: bloc-sidebar on the left, bloc-sidebar-content on the right. Toggle collapses the rail to collapsedWidth.
Dashboard
Sidebar is expanded.
Collapsed
Static Collapsed State
Set [collapsed]="true" to narrow the rail to collapsedWidth (default 4.75rem). Content inside bloc-sidebar is clipped automatically via overflow: hidden.
Dashboard
Sidebar is statically collapsed.
Theming
Dark Sidebar via CSS Tokens
Override --bloc-sidebar-bg, --bloc-sidebar-color, and --bloc-sidebar-border inline or via a theme class.
Content area
Light content panel, dark sidebar.
Custom Radius & Spacing
Use --bloc-sidebar-radius and --bloc-sidebar-padding to adjust shape and density. Both panels are independently controllable.
Content area
Square corners, tight padding.
Responsive
Single-column below 900 px
The layout automatically collapses to a stacked single column when the viewport is narrower than 900px. Both sidebarWidth and collapsedWidth are ignored at that breakpoint — each slot fills full width.
Stack order follows DOM order: bloc-sidebar appears above bloc-sidebar-content on small screens.