Add mobile-friendly menu

appengine/swarming/ui/res/imp/common/swarming-app.html

 <!--
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <swarming-app>
 
@@ skipping 23 matching lines @@
     signed_in: Boolean, if the user is signed in.
   Methods:
     None.
 
   Events:
     None.
 -->
 
 <link rel="import" href="/res/imp/bower_components/app-layout/app-layout.html">
 <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html" >
-<link rel="import" href="/res/imp/bower_components/paper-fab/paper-fab.html" >
+<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="/res/imp/bower_components/iron-media-query/iron-media-query.html">
+<link rel="import" href="/res/imp/bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html">
+<link rel="import" href="/res/imp/bower_components/paper-menu/paper-menu.html">
 <link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner-lite.html">
 
-
 <link rel="import" href="auth-signin.html">
 <link rel="import" href="common-behavior.html">
 
 <dom-module id="swarming-app">
   <template>
     <style include="iron-flex">
       :host {
         position: absolute;
         top: 0;
         bottom: 0;
@@ skipping 16 matching lines @@
         margin-left:15px;
       }
       .main-content {
         padding: 3px;
       }
 
       .main-content a {
         color: #1F78B4;
       }
 
+      .menu-button {
+        min-width: 40px;
+      }
+
       auth-signin, .small {
         font-size: .7em;
       }
 
+      #mobile_menu {
+        z-index: 10;
+        --app-drawer-content-container: {
+          margin-top: 64px;
+        };
+      }
+
+      a[href] {
+        color: #1F78B4;
+      }
+
+      .menu-item {
+        padding: 8px 3px;
+        border-bottom: 1px solid #CCC;
+      }
+
       paper-fab {
         position: fixed;
         bottom: 5px;
         right: 5px;
         background-color: #1F78B4;
       }
 
       paper-spinner-lite {
         --paper-spinner-color: var(--google-yellow-500);
       }
     </style>
+
     <app-header-layout>
+      <app-drawer id="mobile_menu">
+          <div class="menu-item"><a class="left" href="/">Home</a></div>
+          <div class="menu-item"><a class="left" href="/botlist">Bot List</a></div>
+          <div class="menu-item"><a class="left" href="/tasklist">Task List</a></div>
+          <div class="menu-item"><a class="left" href="/oldui">Old UI</a></div>
+      </app-drawer>
       <app-header fixed>
         <app-toolbar>
+          <paper-icon-button
+              class="menu-button"
+              icon="icons:menu"
+              on-tap="_toggleMobileMenu"
+              hidden$="[[wide_layout]]">
+          </paper-icon-button>
           <div class="title left">[[name]]</div>
           <paper-spinner-lite class="left" active="[[_or(busy,_busy1,_busy2)]]"></paper-spinner-lite>
 
-          <a class="left" href="/">Home</a>
-          <a class="left" href="/botlist">Bot List</a>
-          <a class="left" href="/tasklist">Task List</a>
-          <div class="flex"></div>
-          <a class="small right" href="/oldui">Old UI</a>
+          <a class="left" href="/" hidden$="[[!wide_layout]]">Home</a>
+          <a class="left" href="/botlist" hidden$="[[!wide_layout]]">Bot List</a>
+          <a class="left" href="/tasklist" hidden$="[[!wide_layout]]">Task List</a>
+          <div class="flex" hidden$="[[!wide_layout]]"></div>
+          <a class="small right" href="/oldui" hidden$="[[!wide_layout]]">Old UI</a>
           <div class="small right">
             Server:
             <a href$="[[_versionLink(server_details)]]">
               [[server_details.server_version]]
             </a>
           </div>
           <auth-signin
               class="right"
               client_id="[[client_id]]"
               auth_headers="{{auth_headers}}"
               profile="{{profile}}"
               signed_in="{{signed_in}}">
           </auth-signin>
         </app-toolbar>
       </app-header>
       <div class="main-content">
         <content></content>
       </div>
         <a target="_blank" rel="noopener" href="https://bugs.chromium.org/p/chromium/issues/entry?components=Infra%3EPlatform%3ESwarming&owner=kjlubick@chromium.org&status=Assigned">
           <paper-fab mini icon="icons:bug-report"></paper-fab>
         </a>
     </app-header-layout>
 
+    <iron-media-query query="min-width: 600px" query-matches="{{wide_layout}}"></iron-media-query>
+
   </template>
   <script>
     Polymer({
       is: 'swarming-app',
 
       behaviors: [
           SwarmingBehaviors.CommonBehavior,
       ],
 
       properties: {
@@ skipping 50 matching lines @@
 
       },
 
       _load: function() {
         this._getJsonAsync("permissions", "/api/swarming/v1/server/permissions",
           "_busy1", this.auth_headers);
         this._getJsonAsync("server_details", "/api/swarming/v1/server/details",
           "_busy2", this.auth_headers)
       },
 
+      _toggleMobileMenu: function() {
+        this.$.mobile_menu.toggle();
+      },
+
       _versionLink: function(version) {
         if (!version || !version.server_version) {
           return undefined;
         }
         var split = version.server_version.split("-");
         if (split.length !== 2) {
           return undefined;
         }
         return "https://github.com/luci/luci-py/commit/"+split[1];
       }
@@ skipping 87 matching lines @@
         border: none;
         line-height: 20px;
         vertical-align: middle;
       }
 
       select {
         overflow-y: auto;
       }
   </style>
 </dom-module>