Home
Layouts
Two Sidebar

Two Sidebar

A layout with a sidebar on each side, which can be toggled to slide out of view by adding the data-hidden attribute. You can use custom properties to adjust the width’s of the left and right sidebars.

Custom Property	Default Value	Description
`--left-size`	320px	The width of the left sidebar
`--right-size`	320px	The width of the right sidebar
`--min-size`	0	The width each sidebar is reduced to when collapsed

Example
A two sidebar layout.

HTML

<div class="pv-layout-two-sidebar" style="--left-size: 80px; --right-size: 80px">
  <div data-layout="left-sidebar">
    <p>Left</p>
  </div>
  <div data-layout="main-section">
    <p>Main</p>
  </div>
  <div data-layout="right-sidebar">
    <p>Right</p>
  </div>
</div>

The example above assumes the buttons are not inside of the sidebars. If you want to have the buttons inside the sidebars, set a custom property --min-size to the width the sidebar should be when collapsed (to keep the trigger button in view). Any content that is not the button should be enclosed in a container with the class .pv-fade. Add the class .pv-trigger-icon to the trigger button SVG to flip it 180 degrees when the sidebar is toggled.

Example
A two sidebar layout with buttons inside.

HTML

<div class="pv-layout-two-sidebar" style="--left-size: 288px; --right-size: 288px; --min-size: 64px" id="example2">
  <div data-layout="left-sidebar" class="pv-inset-square" id="leftSidebar2">
    <div class="pv-flex">
      <button class="pv-button-ghost pv-button-large" id="hideLeft2">
        <svg aria-hidden="true" class="pv-icon pv-trigger-icon">
      <title>chevrons-left</title>
      <use xlink:href="#chevrons-left"></use>
    </svg>
      </button>
      <ul role="list" class="pv-tab-list pv-full-width pv-fade">
        ...
      </ul>
    </div>
  </div>
  <div data-layout="main-section" class="pv-surface-accent pv-inset-square pv-flow">
    <p>Main</p>
  </div>
  <div data-layout="right-sidebar" class="pv-inset-square" id="rightSidebar2">
    <div class="pv-flex" style="justify-content: end">
      <p class="pv-heading-4 pv-flex-item pv-fade">Document Details</p>
      <button class="pv-button-ghost pv-button-large" style="justify-self: end" id="hideRight2">
        <svg aria-hidden="true" class="pv-icon pv-trigger-icon">
      <title>chevrons-right</title>
      <use xlink:href="#chevrons-right"></use>
    </svg>
      </button>
    </div>
  </div>
</div>

Two Sidebar

Two Sidebar Layout

Two Sidebar Layout with buttons inside