SoM: Navbar links++

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

 <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">
 
 <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;
       }
       paper-item:hover {
         cursor: pointer;
         background-color: #eee;
       }
-      paper-checkbox {
-        padding-bottom: 10px;
-      }
-      hr {
-        width: 90%;
-        background-color: #000;
-      }
     </style>
     <iron-ajax
         auto
         url="/api/v1/trees"
         handle-as="json"
         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>
     </paper-menu>
   </template>
   <script>
   (function() {
     'use strict';
 
     Polymer({
       is: 'som-drawer',
 
       properties: {
         tree: String,
         path: {
            type: String,
            notify: true
         },
         showInfraFailures: {
           type: Boolean,
           notify: true,
         },
+        _staticPageList: {
+          type: Array,
+          computed: '_computeStaticPageList(staticPages)',
+          value: function() { return []; },
+        },
         _treeList: {
            type: Array,
            value: function() { return []; },
         },
         trees: {
           type: Object,
           notify: true,
           computed: '_computeTrees(_treeList)',
         },
       },
 
+      _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) {
           trees[tree.name] = tree;
         });
         return trees;
       },
 
       _onSelected: function(evt) {
         this.path = "/" + evt.srcElement.value;
       },
     });
   })();
   </script>
 </dom-module>