@cuba-platform/front-generator/lib/generators/polymer2/app/template/src/${project_namespace}-user-menu.html

CUBA Platform front-end clients generator

<%  const className = genClassName('UserMenu'); %>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../bower_components/cuba-app/cuba-localize-behavior.html">
<link rel="import" href="../bower_components/cuba-styles/cuba-styles.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="shared-styles.html">

<dom-module id="<%= project.namespace %>-user-menu">
  <template>
    <style include="cuba-styles"></style>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
      .user-menu-button {
        width: 70px;
        text-align: right;
      }
      .user-menu {
        padding: 0;
      }
      .user-menu paper-item {
        cursor: pointer;
      }
    </style>
    <paper-menu-button class="user-menu-button">
      <iron-icon icon="social:person" slot="dropdown-trigger"></iron-icon>
      <paper-listbox slot="dropdown-content" class="user-menu">
        <paper-item on-tap="_logout">[[msg('Logout')]]</paper-item>
      </paper-listbox>
    </paper-menu-button>
  </template>
  <script>
    {
      /**
       * @extends {Polymer.Element}
       * @appliesMixin CubaLocalizeBehavior
       */
      class <%= className %> extends Polymer.mixinBehaviors([CubaLocalizeBehavior], Polymer.Element) {
        static get is() {
          return '<%= project.namespace %>-user-menu';
        }

        _logout() {
          this.app.logout().then(function () {
            window.location.href = document.querySelector('base').href;
          });
        }
      }

      customElements.define(<%= className %>.is, <%= className %>);
    }
  </script>
</dom-module>