burger-test

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('scrollable');

});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.scrollable.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

{{outlet}}

templates.index.hbs

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

    <ul>
      {{#menu.item}}
        {{#link-to "scrollable"}}Block Expression Form{{/link-to}}
      {{/menu.item}}

      {{#menu.item}}
        test
      {{/menu.item}}

      {{#menu.item}}
        test
      {{/menu.item}}
    </ul>
  {{/burger.menu}}

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

templates.scrollable.hbs

<div style="height: 100vh">
{{#ember-scrollable }}
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>

       <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
       <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
       <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
       <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
       <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
{{/ember-scrollable}}
</div>

{{outlet}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-scrollable": "0.4.5",
    "ember-burger-menu": "1.1.3"
  }
}