Layout

Two-Column Sidebar Layout — .sidebar-layout

Flex row with a fixed 220 px left column (.sidebar-layout-aside) and a fluid main panel (.sidebar-layout-main). A right border on the aside acts as the column divider. Collapses to vertical stacking on viewports ≤768 px.

Source file: styles/components/layout.css

Use .sidebar-section-title to label filter or nav groups within the aside.

Architecture

Aside 220px
Filters + Section Shortcuts
Main Panel: Data Tables + Detail Views

Use this when users repeatedly pivot content with filters, status facets, or section shortcuts.

Open full-page sidebar workspace mock

main content
<div class="sidebar-layout">

  <aside class="sidebar-layout-aside">
    <p class="sidebar-section-title">Filters</p>
    <ul class="wm-side-nav">
      <li><a href="#" class="active">All</a></li>
      <li><a href="#">Confirmed</a></li>
    </ul>
  </aside>

  <main class="sidebar-layout-main">
    <!-- main content -->
  </main>

</div>

Responsive Behaviour

Viewport Sidebar Layout
>768 px Two columns — aside left, main right
≤768 px Stacked: aside on top, main below; aside border becomes bottom border