Add mobile-friendly menu

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

Index: appengine/swarming/ui/res/imp/common/swarming-app.html
diff --git a/appengine/swarming/ui/res/imp/common/swarming-app.html b/appengine/swarming/ui/res/imp/common/swarming-app.html
index 15877946ea43b1c7106b326e5a6a3959702c414b..b9988b6271773a2bb7bd05196f27a77929a1cff1 100644
--- a/appengine/swarming/ui/res/imp/common/swarming-app.html
+++ b/appengine/swarming/ui/res/imp/common/swarming-app.html
@@ -41,11 +41,14 @@
 
 <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">
 
@@ -82,10 +85,30 @@
         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;
@@ -97,17 +120,30 @@
         --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)]]">
@@ -131,6 +167,8 @@
         </a>
     </app-header-layout>
 
+    <iron-media-query query="min-width: 600px" query-matches="{{wide_layout}}"></iron-media-query>
+
   </template>
   <script>
     Polymer({
@@ -201,6 +239,10 @@
           "_busy2", this.auth_headers)
       },
 
+      _toggleMobileMenu: function() {
+        this.$.mobile_menu.toggle();
+      },
+
       _versionLink: function(version) {
         if (!version || !version.server_version) {
           return undefined;