SoM: Navbar links++

go/src/infra/appengine/sheriff-o-matic/elements/som-drawer.html

Index: go/src/infra/appengine/sheriff-o-matic/elements/som-drawer.html
diff --git a/go/src/infra/appengine/sheriff-o-matic/elements/som-drawer.html b/go/src/infra/appengine/sheriff-o-matic/elements/som-drawer.html
index 14f39f106a26ac9f0291056ab0f5acdf1cff2fcf..be746fd5b8497d58dd7bb4a536dc2fbc3c185b93 100644
--- a/go/src/infra/appengine/sheriff-o-matic/elements/som-drawer.html
+++ b/go/src/infra/appengine/sheriff-o-matic/elements/som-drawer.html
@@ -1,5 +1,6 @@
 <link rel="import" href="/bower_components/polymer/polymer.html">
 <link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="/bower_components/paper-item/paper-item.html">
 <link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="/bower_components/paper-menu/paper-menu.html">
@@ -7,8 +8,26 @@
 <dom-module id="som-drawer">
   <template>
     <style>
+      h2 {
+        box-sizing: border-box;
+        font-size: 24px;
+        font-weight: bold;
+        padding: 0 5px 5px;
+        width: 95%;
+        margin: 15px auto 10px;
+        border-bottom: 1px solid #bbb;
+      }
+      h2 iron-icon {
+        padding-right: 5px;
+        width: 25px;
+        height: 25px;
+      }
+      paper-checkbox {
+        padding-bottom: 10px;
+      }
       paper-item {
-        font-size: 26px;
+        padding-left: 42px;
+        font-size: 22px;
         -webkit-transition: background .3s ease;
         transition: background .3s ease;
       }
@@ -16,13 +35,6 @@
         cursor: pointer;
         background-color: #eee;
       }
-      paper-checkbox {
-        padding-bottom: 10px;
-      }
-      hr {
-        width: 90%;
-        background-color: #000;
-      }
     </style>
     <iron-ajax
         auto
@@ -31,11 +43,18 @@
         verbose
         last-response="{{_treeList}}"
     ></iron-ajax>
-    <paper-menu attr-for-selected="value" selected="[[tree]]" id="menu">
+    <paper-menu attr-for-selected="value" selected="[[tree]]" selectable="paper-item" id="menu">
+      <h2><iron-icon icon="folder"></iron-icon>Trees</h2>
       <template is="dom-repeat" items="[[_treeList]]" as="tree">
         <paper-item value="[[tree.name]]" on-tap="_onSelected">[[tree.display_name]]</paper-item>
       </template>
-      <hr/>
+
+      <h2><iron-icon icon="help"></iron-icon>Help</h2>
+      <template is="dom-repeat" items="[[_staticPageList]]" as="page">
+        <paper-item value="[[page.name]]" on-tap="_onSelected">[[page.displayText]]</paper-item>
+      </template>
+
+      <h2><iron-icon icon="settings"></iron-icon>Settings</h2>
       <div class="vertical layout center">
         <paper-checkbox class="center" checked="{{showInfraFailures}}">Show infra failures</paper-checkbox>
       </div>
@@ -58,6 +77,11 @@
           type: Boolean,
           notify: true,
         },
+        _staticPageList: {
+          type: Array,
+          computed: '_computeStaticPageList(staticPages)',
+          value: function() { return []; },
+        },
         _treeList: {
            type: Array,
            value: function() { return []; },
@@ -69,6 +93,16 @@
         },
       },
 
+      _computeStaticPageList(staticPages) {
+        let pageList = [];
+        for (let key in staticPages) {
+          let page = staticPages[key];
+          page.name = key;
+          pageList.push(page);
+        }
+        return pageList;
+      },
+
       _computeTrees(treeList) {
         let trees = {};
         treeList.forEach(function(tree) {