special-dispatch-app/app/components/user-area-nav.js

const app = require('../app')
const _ = require('lodash')
const { dashboardIcon, staffMemberIcon, staffingAgencyIcon, laborIcon } = require('../assets')

app.component('appUserAreaNav', {
  template: html`
    <h3>
      Intelligence
    </h3>

    <md-menu-item>
      <md-button ng-href="/dashboard">
        <md-icon md-svg-icon="${dashboardIcon}"></md-icon>
        Dashboard
      </md-button>
    </md-menu-item>

    <h3>Labor</h3>
    <md-menu-item ng-repeat="location in ctrl.locations">
      <md-button ng-href="/labor/{{location.key}}">
        <md-icon md-svg-icon="${laborIcon}"></md-icon>
        {{location.name}} Labor
      </md-button>
    </md-menu-item>

    <h3>Staff</h3>
    <md-menu-item>
      <md-button ng-href="/staff-members">
        <md-icon md-svg-icon="${staffMemberIcon}"></md-icon>
        Staff Members
      </md-button>
    </md-menu-item>
    <md-menu-item>
      <md-button ng-href="/staffing-agencies">
        <md-icon md-svg-icon="${staffingAgencyIcon}"></md-icon>
        Staffing Agencies
      </md-button>
    </md-menu-item>
    
  `,
  controllerAs: 'ctrl',
  controller: function(api) {
    window.api = api.get('/api/locations').then(locations => {
      this.locations = _.sortBy(locations, 'key')
    })
  }
})