Sidebar

Usage

The sidebar component can be used together with the sidebar-container class to add a responsive sidebar to the page. If the sidebar is the first element in the sidebar-container it will display as a left sidebar. Otherwise it will display as a right sidebar.

The sidebar component will automatically switch to the mobile mode once your browser window is smaller than or equal to 844px.

Left Sidebar Example

My Content 
<div class="sidebar-container">
  <EsSidebar>
    My Left Sidebar Content
  </EsSidebar>
  <div class="example-content">
    My Content
  </div>
</div>

Right Sidebar Example

My Content 
<div class="sidebar-container">
  <div class="example-content">
    My Content
  </div>
  <EsSidebar>
    My Right Sidebar Content
  </EsSidebar>
</div>