material-framework/app/components/area.js

const app = require('../app')
const { logo, menuIcon, userIcon, dashboardIcon, roleIcon, dropdownIcon, dropupIcon } = require('../assets')
const assets = require('../assets')

app.component('appArea', {
  transclude: true,
  template: html`
  <div layout="row" flex>
    <md-sidenav flex
      md-component-id="left"
      class="md-sidenav-left"
      md-is-locked-open="$mdMedia('gt-md')"
      md-whiteframe="4"
      layout="column"
      md-theme="nav"
      ng-if="$root.inUserArea">

      <md-content md-theme="nav">
      <header>
        <div class="logo-container">
          <img class="logo" src="${logo}" />
        </div>          
      </header>

      <app-user-area-nav></app-user-area-nav>

      <md-menu-item ng-repeat="crud in $ctrl.cruds">
        <md-button ng-href="/{{crud.paramPlural}}">
          <md-icon md-svg-icon="{{assets[crud.iconAsset]}}"></md-icon>
          {{crud.titlePlural}}
        </md-button>
      </md-menu-item>

      <div ng-if="$ctrl.api.claims.USER_VIEW || $ctrl.api.claims.ROLE_VIEW">
        <h3>
          Administration
        </h3>

        <md-menu-item ng-if="$ctrl.api.claims.USER_VIEW">
          <md-button ng-href="/users">
            <md-icon md-svg-icon="${userIcon}"></md-icon>
            Users
          </md-button>
        </md-menu-item>
        <md-menu-item ng-if="$ctrl.api.claims.ROLE_VIEW">
          <md-button ng-href="/roles">
            <md-icon md-svg-icon="${roleIcon}"></md-icon>
            Roles
          </md-button>
        </md-menu-item>
      </div>
      <!-- <md-menu-item>
        <md-button ng-href="/roles">
          <md-icon md-svg-icon="${roleIcon}"></md-icon>
          Roles
        </md-button>
      </md-menu-item> -->
      </md-content>
    </md-sidenav>
    <md-content flex>
      <md-toolbar ng-if="$root.inUserArea">
        <div class="md-toolbar-tools">
          <md-button class="md-icon-button" aria-label="Settings" ng-hide="$mdMedia('gt-md')" ng-click="$ctrl.toggleNav()">
            <md-icon md-svg-icon="${menuIcon}"></md-icon>
          </md-button>
          <h1 flex>{{$root.userArea.titleText}}</h1>
          <md-menu md-position-mode="target-right target">
            <md-button class="md-raised md-accent hue-10" ng-click="$mdMenu.open($event)">
              <md-icon md-svg-icon="${userIcon}"></md-icon>
              {{$ctrl.api.user.name}}
              <md-icon md-svg-icon="${dropdownIcon}"></md-icon>
            </md-button>
            <md-menu-content>
              <md-menu-item>
                <md-button ng-click="$mdMenu.close($event)">
                  <md-icon md-svg-icon="${userIcon}"></md-icon>
                  {{$ctrl.api.user.name}}
                  <md-icon md-svg-icon="${dropupIcon}"></md-icon>
                </md-button>
              </md-menu-item>
              <md-menu-item>
                <md-button class="md-warn" ng-click="$ctrl.logout()">
                  Log out
                </md-button>
              </md-menu-item>
            </md-menu-content>
          </md-menu>
        </div>
      </md-toolbar>
      <div layout-padding>
        <div ng-transclude></div>
      </div>
    </md-content>
  </div>
`,
  controller: function($rootScope, $mdSidenav, $mdMedia, $scope, cruds, api, $location) {
    window.$rootScope = $rootScope
    this.api = api
    this.cruds = cruds.filter(crud => crud.showNav !== false)
    $scope.assets = assets
    $scope.$mdMedia = $mdMedia
    this.showNav = false
    this.toggleNav = () => {
      $mdSidenav('left').toggle()
    }
    this.logout = async () => {
      await api.logout()
      $location.url('/login')
    }

  }
})