Create off-canvas side menu in ember

In this article I am going to show you how to create and customise animated off-canvas side menu in ember with ember-burger-menu.

In your ember application just install ember-burger-menu by

ember install ember-burger-menu

It will also install ember-cli-sass , After installing this package we need to add the following code to get menu template in application.hbs

{{#burger-menu as |burger|}}
  {{#burger.menu itemTagName="li" as |menu|}}
    <button {{action burger.state.actions.close}}>Close</button>

    <ul>
      {{#menu.item}}
        {{link-to 'Home' 'index'}}
      {{/menu.item}}

      {{#menu.item}}
        {{link-to 'Books' 'books'}}
      {{/menu.item}}

      {{#menu.item}}
        {{link-to 'Create New Book' 'books.new'}}
      {{/menu.item}}

      {{#menu.item}}
        {{link-to 'Users' 'users'}}
      {{/menu.item}}

      {{#menu.item}}
        {{link-to 'Login' 'login'}}
      {{/menu.item}}
    </ul>
  {{/burger.menu}}

  {{#burger.outlet}}
    <button {{action burger.state.actions.toggle}}>Menu</button>
    {{outlet}}
  {{/burger.outlet}}
{{/burger-menu}}

This component will create template for menu it will look plain and without any colour we can customise looks in app.scss by adding .ember-burger-menu element colours

To change animation for menu we need to set animation in #burger-menu component by default animation is slide
For example if you want to add Scale Up animation add :

 {{#burger-menu animation="scale-up" as |burger|}}

We can also change menu items animation also by adding itemAnimation="stack" in burger-menu

{{#burger-menu animation="scale-up" itemAnimation="stack" as |burger|}}

To change menu open position need to add position="right" it can be left or right

We can also implement ember-paper to make nice closing opening buttons for this menu and buttons

To install ember-paper :

ember install ember-paper

To use paper icon-buttons for open and close menu buttons add following code

    {{#paper-button class="icone-close" warn=true onClick=(action burger.state.actions.close) iconButton=true}}
        {{paper-icon "clear"}}
    {{/paper-button}}

There are some other optional properties also like dismissOnClick , dismissOnEsc and dismissOnItemClick these are pretty simple to add in menu component :

{{#burger-menu animation="scale-rotate" itemAnimation="stack" position="right" dismissOnClick=false translucentOverlay="false" as |burger|}}

If you want to create some Custom Animation effects for this menu simply pass the following class to customAnimation property in {{burger-menu}} component.

import Animation from 'ember-burger-menu/animations/base';

export default Animation.extend({
  // CSS class names to be able to target our menu
  animation: 'my-custom-animation',
  itemAnimation: 'my-custom-item-animation',

  container(open, width, right) {
    return {};
  },

  outlet(open, width, right) {
    return {
      transform: open ? right ? `translate3d(-${width}px, 0, 0)` : `translate3d(${width}px, 0, 0)` : ''
    };
  },

  menu(open, width, right) {
    return {};
  },

  menuItem(open, width, right, index) {
    return {
      transform: open ? '' : `translate3d(0, ${(index + 1) * 500}px, 0)`
    };
  }
});

If want to add CSS for this custom animations

.ember-burger-menu.bm--my-custom-animation {
  #{$bm-menu} {}
  > .bm-outlet {}

  &.is-open {
    #{$bm-menu} {}
    > .bm-outlet {}
  }
}

For the menu item:

.ember-burger-menu.bm-item--my-custom-item-animation {
  #{$bm-menu} {
    .bm-menu-item {}
  }

  &.is-open {
    #{$bm-menu} {
      .bm-menu-item {}
    }
  }
}