Add logged-out nav menu

+ Just the All (renamed Changes) to start.
+ Also fix broken search due to the query not being bound
  to the search bar properly.

Bug: Issue 3898
Change-Id: I718d11da382c191688b180c40a1fdeb3931f4bd8

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html

@@ -25,9 +25,11 @@ limitations under the License.
   <template>
     <style>
       :host {
+        display: block;
+      }
+      nav {
         align-items: center;
         display: flex;
-        overflow: hidden;
       }
       .bigTitle {
         color: var(--primary-text-color);
@@ -37,6 +39,57 @@ limitations under the License.
       .bigTitle:hover {
         text-decoration: underline;
       }
+      ul {
+        list-style: none;
+      }
+      .links {
+        margin-left: 2em;
+      }
+      .links ul {
+        display: none;
+      }
+      .links > li {
+        cursor: default;
+        padding: .4em 0;
+        position: relative;
+      }
+      .links li:hover ul {
+        background-color: #fff;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
+        display: block;
+        left: -.75em;
+        position: absolute;
+        top: 2em;
+        z-index: 1000;
+      }
+      .links li ul li a:link,
+      .links li ul li a:visited {
+        color: #00e;
+        display: block;
+        padding: .5em .75em;
+        text-decoration: none;
+      }
+      .links li ul li:hover a {
+        background-color: var(--selection-background-color);
+      }
+      .linksTitle {
+        display: inline-block;
+        padding-right: 1em;
+        position: relative;
+      }
+      .downArrow {
+        border-left: .36em solid transparent;
+        border-right: .36em solid transparent;
+        border-top: .36em solid #ccc;
+        height: 0;
+        position: absolute;
+        right: 0;
+        top: calc(50% - .1em);
+        width: 0;
+      }
+      .links li:hover .downArrow {
+        border-top-color: #666;
+      }
       .rightItems {
         display: flex;
         flex: 1;
@@ -73,14 +126,28 @@ limitations under the License.
         }
       }
     </style>
-    <a href="/" class="bigTitle">PolyGerrit</a>
-    <div class="rightItems">
-      <gr-search-bar value="{{params.query}}" role="search"></gr-search-bar>
-      <div class="accountContainer" id="accountContainer">
-        <a class="loginButton" href="/login" on-tap="_loginTapHandler">Login</a>
-        <gr-account-dropdown account="[[_account]]"></gr-account-dropdown>
+    <nav>
+      <a href="/" class="bigTitle">PolyGerrit</a>
+      <ul class="links">
+        <li>
+          <span class="linksTitle">
+            Changes <i class="downArrow"></i>
+          </span>
+          <ul>
+            <li><a href="/q/status:open">Open</a></li>
+            <li><a href="/q/status:merged">Merged</a></li>
+            <li><a href="/q/status:abandoned">Abandoned</a></li>
+          </ul>
+        </li>
+      </ul>
+      <div class="rightItems">
+        <gr-search-bar value="{{searchQuery}}" role="search"></gr-search-bar>
+        <div class="accountContainer" id="accountContainer">
+          <a class="loginButton" href="/login" on-tap="_loginTapHandler">Login</a>
+          <gr-account-dropdown account="[[_account]]"></gr-account-dropdown>
+        </div>
       </div>
-    </div>
+    </nav>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>
   <script src="gr-main-header.js"></script>

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.js

@@ -22,6 +22,11 @@
     },
 
     properties: {
+      searchQuery: {
+        type: String,
+        notify: true,
+      },
+
       _account: Object,
     },
 

polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html

@@ -30,12 +30,11 @@ limitations under the License.
       }
       input {
         border: 1px solid #d1d2d3;
-        outline: none;
-      }
-      input {
+        border-radius: 2px 0 0 2px;
         flex: 1;
         font: inherit;
-        border-radius: 2px 0 0 2px;
+        outline: none;
+        padding: 0 .25em;
       }
       gr-button {
         background-color: #f1f2f3;

polygerrit-ui/app/elements/gr-app.html

@@ -61,7 +61,7 @@ limitations under the License.
     <gr-ajax id="diffPreferencesXHR"
         url="/accounts/self/preferences.diff"
         last-response="{{_diffPreferences}}"></gr-ajax>
-    <gr-main-header></gr-main-header>
+    <gr-main-header search-query="{{params.query}}"></gr-main-header>
     <main>
       <template is="dom-if" if="{{_showChangeListView}}" restamp="true">
         <gr-change-list-view

polygerrit-ui/app/styles/app-theme.html

@@ -19,6 +19,7 @@ limitations under the License.
   --primary-text-color: #000;
   --search-border-color: #ddd;
   --secondary-color: #f1f2f3;
+  --selection-background-color: #ebf5fb;
   --default-text-color: #000;
   --view-background-color: #fff;
   --default-horizontal-margin: 1.25rem;