wid-drawer-menu.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/communication-icons.html">

<!--
Display a simple menu. This menu should be used in a drawer.

Example:

    <wid-drawer-menu
      current-route="[[route]]"
      menu-items="[[menuItems]]">
    </wid-drawer-menu>

@demo
-->
<dom-module id="wid-drawer-menu">

  <style>
    :host {
      display: block;
    }
    a {
      width: 100%;
      color: inherit;
      text-decoration: none;
    }
    a:hover {
      color:inherit;
      text-decoration:none;
      cursor:pointer;
    }
  </style>
  <template>

    <paper-menu class="list" attr-for-selected="data-route" selected="[[currentRoute]]">
      <template is="dom-repeat" items="[[menuItems]]">

        <paper-item data-route$="[[item.route]]" on-tap="_onTap">
          <iron-icon icon="[[item.icon]]"></iron-icon>
          <span>[[item.title]]</span>
        </paper-item>

      </template>
    </paper-menu>

  </template>

</dom-module>

<script>

  Polymer({

    is: 'wid-drawer-menu',

    properties: {

      /**
       * This items array will be displayed in the paper-menu.
       * @type {[{ route: String, title: String, icon: String}]}
       */
      menuItems: {
        type: Array,
        value: function() {
          return [];
        }
      },

      /**
       * Current application route.
       * @type {String}
       */
      currentRoute: {
        type: String
      }
    },

    _onTap: function (e) {
      this.fire('drawer-menu-tap', e.model.item);
    }
  });

</script>