x-app.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="../../app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../../app-drawer/app-drawer.html">
<link rel="import" href="../../app-header/app-header.html">
<link rel="import" href="../../app-header-layout/app-header-layout.html">
<link rel="import" href="../../app-toolbar/app-toolbar.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../iron-icons/iron-icons.html">
<link rel="import" href="../../../iron-media-query/iron-media-query.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../paper-item/paper-item.html">
<link rel="import" href="../../../paper-menu/paper-menu.html">
<link rel="import" href="../../../paper-tabs/paper-tabs.html">

<dom-module id="x-app">

  <template>

    <style>

      app-toolbar {
        background-color: #dcdcdc;
      }

      .main-header {
        box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
      }

      paper-tabs {
        --paper-tabs-selection-bar-color: black;
        height: 100%;
        max-width: 640px;
      }

      paper-tab {
        --paper-tab-ink: #aaa;
        text-transform: uppercase;
      }

      [hidden] {
        display: none !important;
      }

    </style>

    <app-drawer-layout force-narrow>

      <app-drawer id="drawer">

        <app-toolbar></app-toolbar>

        <!-- Nav on mobile: side nav menu -->
        <paper-menu selected="{{selected}}" attr-for-selected="name">
          <template is="dom-repeat" items="{{items}}">
            <paper-item name="{{item}}">{{item}}</paper-item>
          </template>
        </paper-menu>

      </app-drawer>

      <app-header-layout>
        <app-header class="main-header">

          <app-toolbar>
            <paper-icon-button class="menu-button" icon="menu" drawer-toggle hidden$="{{wideLayout}}"></paper-icon-button>
          </app-toolbar>

          <app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}">
            <!-- Nav on desktop: tabs -->
            <paper-tabs selected="{{selected}}" attr-for-selected="name">
              <template is="dom-repeat" items="{{items}}">
                <paper-tab name="{{item}}">{{item}}</paper-tab>
              </template>
            </paper-tabs>
          </app-toolbar>

        </app-header>
      </app-header-layout>

    </app-drawer-layout>

    <iron-media-query query="min-width: 600px" query-matches="{{wideLayout}}"></iron-media-query>

  </template>

  <script>

    Polymer({

      is: 'x-app',

      properties: {

        selected: {
          type: String,
          value: 'Item One'
        },

        wideLayout: {
          type: Boolean,
          value: false,
          observer: 'onLayoutChange',
        },

        items: {
          type: Array,
          value: function() {
            return ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'];
          }
        }
      },

      onLayoutChange: function(wide) {
        var drawer = this.$.drawer;

        if (wide && drawer.opened) {
          drawer.opened = false;
        }
      }
    });

  </script>

</dom-module>