Ember-off-canvas-sidebar NPM

ember-off-canvas-sidebar

Ember addon for off-canvas sidebar menu with transitions.

Installation

ember install ember-off-canvas-sidebar

Usage

<div id="st-container" class="st-container">
  <EocSidebar @effect="st-effect-1">
    <h2 class="icon icon-lab">Sidebar</h2>
    <ul>
      <li><a class="icon icon-data" href="#">Data Management</a></li>
      <li><a class="icon icon-location" href="#">Location</a></li>
      <li><a class="icon icon-study" href="#">Study</a></li>
      <li><a class="icon icon-photo" href="#">Collections</a></li>
      <li><a class="icon icon-wallet" href="#">Credits</a></li>
    </ul>
  </EocSidebar>


    <div class="st-content"><!-- this is the wrapper for the content -->
      <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
        <!-- YOUR MAIN CONTENT GOES HERE -->
        <!-- YOU CAN KEEP THE TRIGGER HERE ALSO -->
      </div>
    </div>
</div>

Trigger

<button  {{eoc-sidebar-trigger "st-effect-slide-in-on-top"}}>Slide in on top</button>

See the dummy app for more detailed code on how to use this component.

Styles

Ember off-canvas sidebar come with about 14 different transitions for the sidebar. Just give any one of the following values for the eoc-sidebar-trigger modifier of the trigger element.

st-effect-slide-in-on-top (default)
st-effect-reveal
st-effect-3d-rotate-in
st-effect-3d-rotate-out
st-effect-delayed-3d-rotate
st-effect-fall-down
st-effect-open-door
st-effect-push
st-effect-reverse-slide-out
st-effect-rotate-pusher
st-effect-scale-down-pusher
st-effect-scale-rotate-pusher
st-effect-scale-up
st-effect-slide-along

Configuring

Add a configuration for ember-off-canvas-sidebar to include only the transitions that you will use.

ENV['ember-off-canvas-sidebar'] = {
  includedTransitions: ['st-effect-open-door', 'st-effect-fall-down'],
  excludedTransitions: ['st-effect-scale-up'],
  excludeBaseStyles: false, // defaults to false
  defaultTransition: 'st-effect-slide-in-on-top',    // defaults to 'st-effect-slide-in-on-top'
};

To exclude or not include a transition, means that it's css styles will not be bundled with your application, thus not polluting your app.

Note: including a blank array e.g. includeTransitions: [] will not include any transitions, leaving you to define your own transition styles. See the vendor/ember-off-canvas-sidebar/transitions directory for reference.
Note: you may also want to set excludeBaseStyles: true so that this addon doesn't include the styles used by all the transitions.

A big Thanks to Ilya Radchenko for making this configuration possible to have a small memory footprint of css in your app when you are using the addon.