material-framework/app/components/user-area.js

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

app.component('appUserArea', {
  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">

        <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>
          <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>{{$ctrl.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>
  `,
  bindings: {
    titleText: '@'
  },
  controller: function($mdSidenav, $mdMedia, $scope, cruds, api, $location) {
    this.api = api
    if (!api.user || !api.token) {
      $location.url('/login')
    }
    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')
    }
  }
})