---
layout      : 'default'
css         : 'side'

element     : 'sidebar'
elementType : 'element'

title       : 'Sidebar'
description : 'A sidebar hides additional content beside a page.'
type        : 'UI Module'

themes      : ['Default']
---

<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/sidebar.less" />
<script src="/javascript/sidebar.js"></script>

<%- @partial('header', { tabs: 'module' }) %>

<div class="ui styled sidebar">
  <h3 class="ui header">You Might Like</h3>
  <div class="ui fluid vertical menu">
    <a class="item">
      <i class="chat outline icon"></i>
      More by this author
    </a>
    <a class="item">
      <i class="text file icon"></i>
      Suggested Articles
    </a>
  </div>
  <h3 class="ui header">Contact Us</h3>
  <div class="ui form">
    <div class="field">
      <label>Name</label>
      <div class="ui icon input">
        <i class="user icon"></i>
        <input type="text" data-placeholder="Name">
      </div>
    </div>
    <div class="field">
      <label>Message</label>
      <textarea></textarea>
    </div>
    <div class="ui black fluid button">Submit</div>
  </div>
</div>
<div class="ui thin styled sidebar">
  <h3 class="ui header">Share</h3>
  <div class="ui fluid vertical labeled icon buttons">
    <div class="ui facebook button">
      <i class="facebook icon"></i>
      Facebook
    </div>
    <div class="ui twitter button">
      <i class="twitter icon"></i>
      Twitter
    </div>
    <div class="ui google plus button">
      <i class="google plus icon"></i>
      Google
    </div>
  </div>
</div>
<div class="ui very thin styled sidebar">
  <div class="ui fluid vertical icon buttons">
    <div class="ui facebook button">
      <i class="facebook icon"></i>
    </div>
    <div class="ui twitter button">
      <i class="twitter icon"></i>
    </div>
    <div class="ui google plus button">
      <i class="google plus icon"></i>
    </div>
  </div>
</div>
<div class="ui wide styled sidebar">
  <h3 class="ui header">You Might Like</h3>
  <div class="ui fluid vertical menu">
    <a class="item">
      <i class="chat outline icon"></i>
      More by this author
    </a>
    <a class="item">
      <i class="text file icon"></i>
      Suggested Articles
    </a>
  </div>
</div>
<div class="ui very wide styled sidebar">
  <h3 class="ui header">Contact Us</h3>
  <div class="ui form">
    <div class="field">
      <label>Name</label>
      <div class="ui icon input">
        <i class="user icon"></i>
        <input type="text" data-placeholder="Name">
      </div>
    </div>
    <div class="field">
      <label>Message</label>
      <textarea></textarea>
    </div>
    <div class="ui black fluid button">Submit</div>
  </div>
</div>

<div class="ui vertical overlay sidebar menu">
  <a class="item">
    <i class="home icon"></i>
    Home
  </a>
  <a class="active item">
    <i class="heart icon"></i>
    Current Section
  </a>
  <a class="item">
    <i class="facebook icon"></i>
    Like us on Facebook
  </a>
  <div class="item">
    <b>More</b>
    <div class="menu">
      <a class="item">About</a>
      <a class="item">Contact Us</a>
    </div>
  </div>
</div>
<div class="ui floating vertical sidebar menu">
  <a class="item">
    <i class="home icon"></i>
    Home
  </a>
  <a class="active item">
    <i class="heart icon"></i>
    Current Section
  </a>
  <a class="item">
    <i class="facebook icon"></i>
    Like us on Facebook
  </a>
  <div class="item">
    <b>More</b>
    <div class="menu">
      <a class="item">About</a>
      <a class="item">Contact Us</a>
    </div>
  </div>
</div>

<div class="ui red vertical demo sidebar menu">
  <a class="item">
    <i class="home icon"></i>
    Home
  </a>
  <a class="active item">
    <i class="heart icon"></i>
    Current Section
  </a>
  <a class="item">
    <i class="facebook icon"></i>
    Like us on Facebook
  </a>
  <div class="item">
    <b>More</b>
    <div class="menu">
      <a class="item">About</a>
      <a class="item">Contact Us</a>
    </div>
  </div>
</div>
<div class="ui left sidebar vertical menu">
  <div class="header item">Left Sidebar menu</div>
  <a class="item">One</a>
  <a class="item">Two</a>
  <a class="item">Three</a>
</div>
<div class="ui right sidebar inverted red vertical menu">
  <div class="header item">Right Sidebar menu</div>
  <a class="item">One</a>
  <a class="item">Two</a>
  <a class="item">Three</a>
</div>
<div class="ui top inverted teal sidebar menu">
  <div class="header item">Top Sidebar menu</div>
  <a class="item">One</a>
  <a class="item">Two</a>
  <a class="item">Three</a>
</div>
<div class="ui bottom inverted sidebar menu">
  <div class="header item">Bottom Sidebar menu</div>
  <a class="item">One</a>
  <a class="item">Two</a>
  <a class="item">Three</a>
</div>

<div class="main container">

  <div class="ui active tab" data-tab="definition">
    <div class="peek">
      <div class="ui vertical pointing secondary menu">
        <a class="active item">Types</a>
        <a class="item">Variations</a>
      </div>
    </div>
    <h2 class="ui dividing header">Types</h2>

    <div class="no example">
      <h4 class="ui header">Direction</h4>
      <p>A sidebar can appear on any side of content</p>
      <div class="code" data-type="html">
        <div class="ui sidebar">...</div>
        <div class="ui top sidebar">...</div>
        <div class="ui right sidebar">...</div>
        <div class="ui bottom sidebar">...</div>
      </div>
      <div class="ui variation toggle buttons">
        <div class="ui button" data-variation=".left">
          Left
        </div>
        <div class="ui button" data-variation=".top">
          Top
        </div>
        <div class="ui button" data-variation=".right">
          Right
        </div>
        <div class="ui button" data-variation=".bottom">
          Bottom
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Variations</h2>

    <div class="no styled example">
      <h4 class="ui header">Styled</h4>
      <p>A sidebar can be formatted to include additional styling for display</p>
      <div class="code" data-type="html">
        <div class="ui styled sidebar">...</div>
      </div>
      <div class="ui labeled icon button">
        <i class="left arrow icon"></i>
        Show
      </div>
    </div>

    <div class="no size example">
      <h4 class="ui header">Size</h4>
      <p>A sidebar can vary in width and height to allow more content</p>
      <div class="code" data-type="html">
        <div class="ui very thin sidebar">...</div>
        <div class="ui thin sidebar">...</div>
        <div class="ui wide sidebar">...</div>
        <div class="ui very wide sidebar">...</div>
      </div>
      <div class="ui variation toggle buttons">
        <div class="ui button" data-variation=".very.thin">
          Very Thin
        </div>
        <div class="ui button" data-variation=".thin">
          Thin
        </div>
        <div class="ui button" data-variation=".wide">
          Wide
        </div>
        <div class="ui button" data-variation=".very.wide">
          Very Wide
        </div>
      </div>
    </div>

    <div class="no floating example">
      <h4 class="ui header">Floating</h4>
      <p>A sidebar can appear floating above content</p>
      <div class="code" data-type="html">
        <div class="ui floating sidebar">...</div>
      </div>
      <div class="ui labeled icon button">
        <i class="left arrow icon"></i>
        Show
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">
    <h2 class="ui dividing header">Initializing</h2>
    <p>Any content can be used as a sidebar by adding the class <code>ui sidebar</code> and initializing the menu in javascript.</p>
    <div class="ui ignored warning icon message">
      <i class="info letter icon"></i>
      <div class="content">
        <div class="header">Fixed Position</div>
        <p>Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions</p>
        <ul class="ui list">
          <li>Specify your fixed content without using the css left or top properties.</li>
          <li>Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class <code>(direction) pushed</code> when the view is moved.</li>
        </ul>
      </div>
    </div>
    <div class="code" data-label="true" data-type="html">
      <div class="ui sidebar">
        Any content in the world
      </div>
    </div>
    <div class="code" data-label="true" data-type="javascript">
      $('.ui.sidebar')
        .sidebar()
      ;
    </div>

    <h2 class="ui dividing header">Usage</h2>

    <div class="no example">
      <h4 class="ui header">Showing a sidebar</h4>
      <p>A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with <a href="/collections/menu.html">ui menu</a> to display a vertical menu as a sidebar.</p>
      <div class="code" data-type="html" data-title="Example HTML">
      <div class="ui red vertical demo sidebar menu">
        <a class="item">
          <i class="home icon"></i>
          Home
        </a>
        <a class="active item">
          <i class="heart icon"></i>
          Current Section
        </a>
        <a class="item">
          <i class="facebook icon"></i>
          Like us on Facebook
        </a>
        <div class="item">
          <b>More</b>
          <div class="menu">
            <a class="item">About</a>
            <a class="item">Contact Us</a>
          </div>
        </div>
      </div>
      </div>
      <div class="code" data-demo="true" data-type="javascript">
      $('.demo.sidebar')
        .sidebar('toggle')
      ;
      </div>
    </div>


    <h2 class="ui dividing header">Behavior</h2>

    <p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
    <div class="code">
    $('.your.element')
      .sidebar('behavior name', argumentOne, argumentTwo)
    ;
    </div>

    <table class="ui definition celled sortable table segment">
      <thead>
        <th>Behavior</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>attach events(selector, event)</td>
          <td>Attaches sidebar action to given selector. Default event if none specified is toggle</td>
        </tr>
        <tr>
          <td>show</td>
          <td>Shows sidebar</td>
        </tr>
        <tr>
          <td>hide</td>
          <td>Hides sidebar</td>
        </tr>
        <tr>
          <td>toggle</td>
          <td>Toggles visibility of sidebar</td>
        </tr>
        <tr>
          <td>is open</td>
          <td>Returns whether sidebar is open</td>
        </tr>
        <tr>
          <td>is closed</td>
          <td>Returns whether sidebar is closed</td>
        </tr>
        <tr>
          <td>push page</td>
          <td>Pushes page content to be visible alongside sidebar</td>
        </tr>
        <tr>
          <td>get direction</td>
          <td>Returns direction of current sidebar</td>
        </tr>
        <tr>
          <td>pull page</td>
          <td>Returns page content to original position</td>
        </tr>
        <tr>
          <td>add body css</td>
          <td>Adds stylesheet to page head to trigger sidebar animations</td>
        </tr>
        <tr>
          <td>remove body css</td>
          <td>Removes any inline stylesheets for sidebar animation</td>
        </tr>
        <tr>
          <td>get transition event</td>
          <td>Returns vendor prefixed transition end event</td>
        </tr>
      </tbody>
    </table>


  </div>

  <div class="ui tab" data-tab="examples">

    <div class="no example">
      <h4 class="ui header">Overlay</h4>
      <p>A sidebar can overlay page content instead of pushing it to the side</p>
      <div class="code" data-demo="true">
      $('.overlay.sidebar')
        .sidebar({
          overlay: true
        })
        .sidebar('toggle')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Triggering show/hide with other content</h4>
      <p>For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click</p>
      <div class="code" data-demo="true">
      $('.demo.sidebar').first()
        .sidebar('attach events', '.toggle.button')
      ;
      $('.toggle.button')
        .removeClass('disabled')
      ;
      </div>
      <div class="ui disabled secondary labeled icon toggle button">
        <i class="left arrow icon"></i>
        Trigger Sidebar
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Triggering custom action with other content</h4>
      <p>You can also however specify what action should occur when the element is clicked</p>
      <div class="code" data-demo="true">
      $('.demo.sidebar').first()
        .sidebar('attach events', '.open.button', 'show')
      ;
      $('.open.button')
        .removeClass('disabled')
      ;
      </div>
      <div class="ui disabled secondary labeled icon open button">
        <i class="left arrow icon"></i>
        Open Sidebar
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="settings">

    <h3 class="ui header">
      Sidebar Settings
      <div class="sub header">Form settings modify the sidebar behavior</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>overlay</td>
          <td>false</td>
          <td>Whether sidebar should overlay page instead of pushing page to the side</td>
        </tr>
        <tr>
          <td>exclusive</td>
          <td>true</td>
          <td>Whether multiple sidebars can be open at once</td>
        </tr>
        <tr>
          <td>useCSS</td>
          <td>true</td>
          <td>Whether to use css animations or fallback javascript animations</td>
        </tr>
        <tr>
          <td>duration</td>
          <td>300</td>
          <td>Duration of side bar transition animation</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
    <h4 class="ui header">Callbacks</h4>
    <p>Callbacks specify a function to occur after a specific behavior.</p>

    <table class="ui celled sortable definition table segment">
      <thead>
        <th class="four wide">Setting</th>
        <th>Context</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>onShow</td>
          <td>Sidebar</td>
          <td>Is called when a sidebar is shown.</td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>Sidebar</td>
          <td>Is called when a sidebar is hidden.</td>
        </tr>
        <tr>
          <td>onChange</td>
          <td>Sidebar</td>
          <td>Is called after a sidebar changes visibility</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui celled definition table segment">
      <thead>
        <th>Setting</th>
        <th class="six wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>sidebar</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>className</td>
          <td>
            <div class="code">
      className: {
        active : 'active',
        pushed : 'pushed',
        top    : 'top',
        left   : 'left',
        right  : 'right',
        bottom : 'bottom'
      }
            </div>
          </td>
          <td>Class names used to attach style to state</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Sidebar</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>errors</td>
          <td colspan="2">
            <div class="code">
      error   : {
        method   : 'The method you called is not defined.',
        notFound : 'There were no elements that matched the specified selector'
      }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>