Accordion nav demo

components.accordion-group.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  label: null
});

components.accordion-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  classNames: ['accordion-item'],
  classNameBindings: [
    'isSelected:accordion-item--active',
    'isCurrent:accordion-item--current'
  ],
  selected: null,
  select: null,

  isSelected: Ember.computed('selected', {
    get() {
      return this.get('selected') === this.get('elementId')
    }
  }),

  isCurrent: Ember.computed('selected', {
    get() {
      return this.$('a.ember-view.active').length;
    }
  }),

  didReceiveAttrs() {
    // If there is no "selected" item, and this item has renderd a link-to for the
    // current route, make this the selected item.
    Ember.run.schedule('afterRender', this, function() {
      if (!this.get('selected') && this.$('a.ember-view.active').length) {
        this.get('select')(this.get('elementId'))
      }
    })
  },

  click() {
    this.get('select')(this.get('elementId'))
  }
});

components.accordion-menu.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['accordion-menu'],
  selected: null,
  actions: {
    select(id) {
      this.set('selected', id)
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Accordion Nav Demo',
  selectedNav: null,
  actions: {
    selectActiveNavigationItem() {
      this.set('selectedNav', null)
    }
  }
});

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('contact-us');
  this.route('teaching-resources', function() {
    this.route('k-2');
    this.route('3-4');
    this.route('5-6');
    this.route('big-books');
    this.route('book-notes');
    this.route('naplan');
  });
  this.route('manage');
  this.route('reading', function() {
    this.route('re', function() {
      this.route('preview-lessons');
      this.route('manage-lessons');
      this.route('reports', function() {
        this.route('dashboard');
        this.route('time-on-task');
        this.route('reading');
        this.route('quizzes-completed');
				this.route('driving-tests');
        this.route('lexile-level-and-growth');
        this.route('spelling');
        this.route('stories-written');
        this.route('storylands');
        this.route('books-read');
        this.route('certificates-earned');
      });
    });
    this.route('rex', function() {
      this.route('preview-lessons');
      this.route('manage-lessons');
      this.route('manage-assignments');
      this.route('reports', function() {
        this.route('dashboard');
        this.route('time-on-task');
        this.route('comprehension');
        this.route('quizzes-completed');
				this.route('assessments-completed');
        this.route('lexile-level-and-growth');
        this.route('spelling');
        this.route('books-read');
        this.route('books-read-by-level');
        this.route('stadium');
        this.route('trophies-earned');
      });
    });
  });
  this.route('quick-links', function() {
    this.route('research-reports');
    this.route('user-guides');
    this.route('subscription-order-form');
    this.route('tell-a-colleague');
  });
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    didTransition() {
      this.controller.send('selectActiveNavigationItem')
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

a {
  display: block;
  color: grey;
}
a.active { color: green; }

.accordion-menu {

}

.accordion-menu ol,
.accordion-menu ul {
  margin: 0;
  padding: 0;
  list-style: 0;
}
.accordion-menu li {
  list-style: none;
  margin: 4px;
	padding: 4px;
}

.accordion-group__label {
  font-size: 100%;
  margin: 12px 4px 4px;
}

.accordion-group__list {
  
}

.accordion-item {
	border-bottom: 1px solid lightgrey;
}

.accordion-item--current {
  border-bottom-color: green;
}

.accordion-item__label {
  color: grey;
}

span.accordion-item__label {
  display: block;
}

span.accordion-item__label:after {
  content: '▶︎';
  position: absolute;
  right: 25px;
}

.accordion-item--active > span.accordion-item__label:after {
  content: '▼';
}

.accordion-item--current > .accordion-item__label {
  color: green;
}

.accordion-item__children {
  display: none;
}

.accordion-item--active > .accordion-item__children {
  display: block;
}

templates.application.hbs

{{#accordion-menu selected=selectedNav as |menu|}}
	{{#menu.group}}
    {{menu.item selected=menu.selected select=menu.select label="Home" linkTo="index"}}
    {{#menu.item selected=menu.selected select=menu.select label="Teacher toolkit"}}
    	<ol>
        <li>{{#link-to 'teaching-resources.k-2'}}K-2 Teaching Resources{{/link-to}}</li>
        <li>{{#link-to 'teaching-resources.3-4'}}3-4 Teaching Resources{{/link-to}}</li>
        <li>{{#link-to 'teaching-resources.5-6'}}5-6 Teaching Resources{{/link-to}}</li>
        <li>{{#link-to 'teaching-resources.big-books'}}Big Books{{/link-to}}</li>
        <li>{{#link-to 'teaching-resources.book-notes'}}Book Notes{{/link-to}}</li>
        <li>{{#link-to 'teaching-resources.naplan'}}NAPLAN{{/link-to}}</li>
			</ol>
    {{/menu.item}}
    {{menu.item selected=menu.selected select=menu.select label="Manage Classes" linkTo="manage"}}
	{{/menu.group}}

  {{#menu.group label="Reading Eggs"}}
    {{#menu.item selected=menu.selected select=menu.select label="Lessons"}}
			<ol>
        <li>{{#link-to 'reading.re.preview-lessons'}}Preview Lessons{{/link-to}}</li>
        <li>{{#link-to 'reading.re.manage-lessons'}}Manage Lessons{{/link-to}}</li>
			</ol>
    {{/menu.item}}
    {{#menu.item selected=menu.selected select=menu.select label="Reports"}}
			<ol>
        <li>{{#link-to 'reading.re.reports.dashboard'}}Dashboard{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.time-on-task'}}Time on task{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.reading'}}Reading{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.quizzes-completed'}}Quizzes completed{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.driving-tests'}}Driving tests{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.lexile-level-and-growth'}}Lexile level and growth{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.spelling'}}Speling{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.stories-written'}}Stories written{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.storylands'}}Storylands{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.books-read'}}Books read{{/link-to}}</li>
        <li>{{#link-to 'reading.re.reports.certificates-earned'}}Certificates earned{{/link-to}}</li>
			</ol>
    {{/menu.item}}
	{{/menu.group}}

  {{#menu.group label="Reading Eggspress"}}
    {{#menu.item selected=menu.selected select=menu.select label="Lessons"}}
			<ol>
        <li>{{#link-to 'reading.rex.preview-lessons'}}Preview Lessons{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.manage-lessons'}}Manage Lessons{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.manage-assignments'}}Manage Assignments{{/link-to}}</li>
			</ol>
    {{/menu.item}}
    {{#menu.item selected=menu.selected select=menu.select label="Reports"}}
			<ol>
        <li>{{#link-to 'reading.rex.reports.dashboard'}}Dashboard{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.time-on-task'}}Time on task{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.comprehension'}}Comprehension{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.quizzes-completed'}}Quizzes completed{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.assessments-completed'}}Assessments completed{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.lexile-level-and-growth'}}Lexile level and growth{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.spelling'}}Speling{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.books-read'}}Books read{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.books-read-by-level'}}Books read by level{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.stadium'}}The stadium{{/link-to}}</li>
        <li>{{#link-to 'reading.rex.reports.trophies-earned'}}Trophies earned{{/link-to}}</li>
			</ol>
    {{/menu.item}}
	{{/menu.group}}

  {{#menu.group}}
    {{#menu.item selected=menu.selected select=menu.select label="Quick Links"}}
			<ol>
        <li>{{#link-to 'quick-links.research-reports'}}Research reports{{/link-to}}</li>
        <li>{{#link-to 'quick-links.user-guides'}}User guides{{/link-to}}</li>
        <li>{{#link-to 'quick-links.subscription-order-form'}}Subscription Order Form{{/link-to}}</li>
        <li>{{#link-to 'quick-links.tell-a-colleague'}}Tell a Colleague{{/link-to}}</li>
			</ol>
    {{/menu.item}}
    {{menu.item selected=menu.selected select=menu.select label="Contact us" linkTo="contact-us"}}
    {{menu.item selected=menu.selected select=menu.select label="External Link" href="https://example.com"}}
	{{/menu.group}}
{{/accordion-menu}}

<p>The navigation list is made of up top-level items. Each item may be a link to an Ember route, a link to an external URL, or an expandable list of sub-items. The top-level items are divided into groups, which may optionally have a heading to seperate them into categories. Items that are expandalbe behave like an accordion—only one may be open at a time.</p>

<p>The item that contains a link to the current route is visually highlighted to indicate the current page to the user, even if another item has been opened.</p>

<p>After the application changes routes (via a link from the menu, or any other way), the appropriate items is always selected, indicating the current page. This can be simulated by expanding a section that doesn't contain a link to the current route, and clicking the button below.</p>
<button {{action "selectActiveNavigationItem"}}>[simulate page navigation]</button>

templates.components.accordion-group.hbs

{{#if label}}
	<h2 class="accordion-group__label">{{label}}</h2>
{{/if}}

<ol class="accordion-group__list">
	{{yield}}
</ol>

templates.components.accordion-item.hbs

{{#if linkTo}}
  {{#link-to linkTo class="accordion-item__label"}}
		{{label}}
	{{/link-to}}
{{else if href}}
  <a href={{href}} class="accordion-item__label">{{label}}</a>
{{else}}
  <span class="accordion-item__label">{{label}}</span>

	{{#if (has-block)}}
    <div class="accordion-item__children">
      {{yield}}
    </div>
  {{/if}}
{{/if}}

templates.components.accordion-menu.hbs

{{yield (hash
  group=(component "accordion-group")
  item=(component "accordion-item")
  selected=selected
  select=(action "select")
)}}

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

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

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

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"
  }
}