Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/hotlist/mr-hotlist-header/mr-hotlist-header.js b/static_src/elements/hotlist/mr-hotlist-header/mr-hotlist-header.js
new file mode 100644
index 0000000..b7087a9
--- /dev/null
+++ b/static_src/elements/hotlist/mr-hotlist-header/mr-hotlist-header.js
@@ -0,0 +1,72 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+import 'elements/framework/mr-tabs/mr-tabs.js';
+
+/** @type {readonly MenuItem[]} */
+const _MENU_ITEMS = Object.freeze([
+ {
+ icon: 'list',
+ text: 'Issues',
+ url: 'issues',
+ },
+ {
+ icon: 'people',
+ text: 'People',
+ url: 'people',
+ },
+ {
+ icon: 'settings',
+ text: 'Settings',
+ url: 'settings',
+ },
+]);
+
+// TODO(dtu): Put this inside <mr-header>. Currently, we can't do this because
+// the sticky table headers rely on having a fixed header height. We need to
+// add a scrolling context to the page in order to have a dynamic-height
+// sticky, and to do that the footer needs to be in the scrolling context. So,
+// the footer needs to be SPA-ified.
+/** Hotlist Issues page */
+export class MrHotlistHeader extends LitElement {
+ /** @override */
+ static get styles() {
+ return css`
+ h1 {
+ font-size: 20px;
+ font-weight: normal;
+ margin: 16px 24px;
+ }
+ nav {
+ border-bottom: solid #ddd 1px;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <nav>
+ <mr-tabs .items=${_MENU_ITEMS} .selected=${this.selected}></mr-tabs>
+ </nav>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ selected: {type: Number},
+ };
+ };
+
+ /** @override */
+ constructor() {
+ super();
+ /** @type {number} */
+ this.selected = 0;
+ }
+}
+
+customElements.define('mr-hotlist-header', MrHotlistHeader);