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

CUBA Platform front-end clients generator

<%  const className = genClassName('Menu'); %>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.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="shared-styles.html">

<dom-module id="<%=project.namespace%>-menu">
  <template>
    <style include="cuba-styles"></style>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
      paper-icon-item, paper-item {
        font-size: 14px;
        cursor: pointer;
        --paper-item-icon: {
          flex-shrink: 0;
        }
      }
    </style>

    <app-location path="{{path}}" route="{{route}}" use-hash-as-path></app-location>
    <app-route route="{{route}}"
               pattern="/:page"
               data="{{routeData}}">
    </app-route>

    <paper-listbox attr-for-selected="data-path"
                selected="[[_computeSelectedItem(routeData.page)]]">
      <paper-icon-item data-path="" on-tap="navigate">
        <iron-icon icon="home" slot="item-icon"></iron-icon> [[msg('Home')]]
      </paper-icon-item>
    </paper-listbox>

  </template>
  <script>
    {
      /**
       * @extends {Polymer.Element}
       * @appliesMixin CubaLocalizeBehavior
       */
      class <%= className %> extends Polymer.mixinBehaviors([CubaLocalizeBehavior], Polymer.Element) {
        static get is() {
          return '<%= project.namespace %>-menu';
        }

        static get properties() {
          return {
            path: String
          }
        }

        navigate(event) {
          this.path = '/' + event.target.dataset.path;
          this.dispatchEvent(new CustomEvent('menu-navigate'));
        }

        _computeSelectedItem(page) {
          return page || '';
        }
      }

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