# Side Bar
## This component will render Vinli style sidebar. Configurable options include:

* Theme: The background of the sidebar. Can also be passed down to side-bar-{header, footer, body}. Optional. Defaults to `light`
* Type: The display and interaction type of the sidebar. Optional. May be one of `off-canvas`, `fixed`, `collapseable`. Defaults to `off-canvas`.

## Contextual Components

* Header: Fixed at top. May only include one per side-bar. Can have own theme or inherit.
* Body: Scrollable. May only include one per side-bar. Can have own theme or inherit.
* Footer: Fixed at bottom. May only include one per side-bar. Can have own theme or inherit.

```
### Off-Canvas Usage
You'll need a button to controll opening the off-canvas menu. Suggested placement is inside `appChrome.appHeader` as shown below
```handlebars
{{#side-bar type='off-canvas' theme=theme as |sideBar|}}
  {{#sideBar.header}}
    ...
  {{/sideBar.header}}

  {{#sideBar.body}}
    ...
  {{/sideBar.body}}

  {{#sideBar.footer}}
    ...
  {{/sideBar.footer}}
{{/side-bar}}

<main role='main' class='app-body'>
  {{#appChrome.appHeader as |appHeader|}}
    <div class="app-header__section app-header__section--left">
      <button class="btn btn--regular btn--transparent" {{action appChrome.openSideBar}}>
        {{inline-svg 'menu' class='icon icon--menu'}}
      </button>
    </div>
    <div class="app-header__section app-header__section--center">
      ...
    </div>
    <div class="app-header__section app-header__section--right">
      ...
    </div>
  {{/appChrome.appHeader}}
  ...
</main>
```

### Fixed Usage
```handlebars
{{#side-bar type='fixed' theme=theme as |sideBar|}}
  {{#sideBar.header}}
    ...
  {{/sideBar.header}}

  {{#sideBar.body}}
    ...
  {{/sideBar.body}}

  {{#sideBar.footer}}
    ...
  {{/sideBar.footer}}
{{/side-bar}}

### Collapseable Usage
You'll need to include a button to toggle the collapseable state. Suggested placement is inside the `sideBar.header` as shown below. Note that you *must* include icons in your `sideBar.body` `nav-bar`.
```handlebars
{{#side-bar type='collapseable' theme=theme as |sideBar|}}
  {{#sideBar.header}}
    {{vinli-button
      action=(action appChrome.toggleCollapse)
      icon='side-bar-arrow'
      icon-position='after'
      width='full'
      size='medium'
      theme='dark-blue'
      class=(concat 'side-bar__toggle-btn' (if sideBar.isCollapsed ' side-bar__toggle-btn--collapsed'))}}
  {{/sideBar.header}}

  {{#sideBar.body}}
    {{#nav-bar flow='column' sideBarIsCollapsed=sideBar.isCollapsed as |navBar|}}
      {{navBar.item 'Foo' 'foo' icon='foo-icon' icon-position='row'}}
      {{navBar.item 'Bar' 'bar' icon='bar-icon' icon-position='row'}}
    {{/nav-bar}}
  {{/sideBar.body}}

  {{#sideBar.footer}}
    ...
  {{/sideBar.footer}}
{{/side-bar}}
```