From 4257ce548bfd9f7c01bfa35cf5105cb9aceda86a Mon Sep 17 00:00:00 2001
From: Yuri Sizov <yuris@humnom.net>
Date: Wed, 15 Mar 2023 20:49:46 +0100
Subject: [PATCH] Add a shared navigation component for all pages

---
 .../index/components/IndexDescription.js      |  13 --
 src/paths/index/entry.js                      |   2 +
 src/shared/components/SharedNavigation.js     | 116 ++++++++++++++++++
 src/static/icons/hamburger.svg                |   1 +
 4 files changed, 119 insertions(+), 13 deletions(-)
 create mode 100644 src/shared/components/SharedNavigation.js
 create mode 100644 src/static/icons/hamburger.svg

diff --git a/src/paths/index/components/IndexDescription.js b/src/paths/index/components/IndexDescription.js
index a9282b6..30e8c55 100644
--- a/src/paths/index/components/IndexDescription.js
+++ b/src/paths/index/components/IndexDescription.js
@@ -26,10 +26,6 @@ export default class IndexDescription extends LitElement {
           :host .header-description-column {
             flex: 2;
           }
-          :host .header-description-column.header-extra-links {
-            flex: 1;
-            text-align: right;
-          }
 
           :host .header-description a {
             color: var(--link-font-color);
@@ -54,10 +50,6 @@ export default class IndexDescription extends LitElement {
             :host .header-description-column {
               width: 100%;
             }
-            :host .header-description-column.header-extra-links {
-              text-align: center;
-              padding-top: 12px;
-            }
           }
         `;
     }
@@ -74,11 +66,6 @@ export default class IndexDescription extends LitElement {
                     The goal here is to help contributors and maintainers identify possible
                     conflicts and duplication.
                 </div>
-                <div class="header-description-column header-extra-links">
-                    See also:
-                    <br />
-                    <a href="https://godotengine.github.io/godot-team-reports/" target="_blank">Godot Team Reports</a>
-                </div>
             </div>
         `;
     }
diff --git a/src/paths/index/entry.js b/src/paths/index/entry.js
index ee4818c..8c55ab4 100644
--- a/src/paths/index/entry.js
+++ b/src/paths/index/entry.js
@@ -1,6 +1,7 @@
 import { LitElement, html, css, customElement, property } from 'lit-element';
 
 import PageContent from 'src/shared/components/PageContent';
+import SharedNavigation from 'src/shared/components/SharedNavigation';
 import IndexHeader from "./components/IndexHeader";
 import IndexDescription from "./components/IndexDescription";
 
@@ -155,6 +156,7 @@ export default class EntryComponent extends LitElement {
     render(){
         return html`
             <page-content>
+                <shared-nav></shared-nav>
                 <gr-index-entry .generated_at="${this._generatedAt}"></gr-index-entry>
                 <gr-index-description></gr-index-description>
 
diff --git a/src/shared/components/SharedNavigation.js b/src/shared/components/SharedNavigation.js
new file mode 100644
index 0000000..323aa28
--- /dev/null
+++ b/src/shared/components/SharedNavigation.js
@@ -0,0 +1,116 @@
+import { LitElement, html, css, customElement } from 'lit-element';
+
+@customElement('shared-nav')
+export default class SharedNavigation extends LitElement {
+    static get styles() {
+        return css`
+            /** Colors and variables **/
+            :host {
+            }
+            @media (prefers-color-scheme: dark) {
+                :host {
+                }
+            }
+
+            /** Component styling **/
+            :host {
+            }
+
+            :host .nav-container a {
+                color: var(--link-font-color);
+                text-decoration: none;
+            }
+            :host .nav-container a:hover {
+                color: var(--link-font-color-hover);
+            }
+
+            :host .nav-container {
+                display: flex;
+                gap: 8px;
+                margin-top: 8px;
+                background: var(--g-background-color);
+            }
+
+            :host .nav-item {
+                font-size: 16px;
+                font-weight: 600;
+                padding: 10px 16px;
+            }
+            :host .nav-item:hover {
+                background-color: var(--g-background-extra2-color);
+            }
+
+            :host .nav-toggler {
+                display: none;
+                background-image: url('hamburger.svg');
+                background-repeat: no-repeat;
+                background-position: center;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 48px;
+                height: 48px;
+            }
+            :host .nav-toggler:hover {
+                background-color: var(--g-background-extra2-color);
+            }
+
+            @media only screen and (max-width: 640px) {
+                :host .nav-container {
+                    display: none;
+                    flex-direction: column;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    padding-top: 40px;
+                    padding-bottom: 12px;
+                }
+                :host .nav-container.nav-active {
+                    display: flex;
+                }
+
+                :host .nav-toggler {
+                    display: block;
+                }
+            }
+        `;
+    }
+
+    constructor() {
+        super();
+
+        this._mobileActive = false;
+    }
+
+    _onMobileToggled() {
+        this._mobileActive = !this._mobileActive;
+        this.requestUpdate();
+    }
+
+    render(){
+        const containerClassList = [ "nav-container" ];
+        if (this._mobileActive) {
+            containerClassList.push("nav-active");
+        }
+
+        return html`
+            <div class="${containerClassList.join(" ")}">
+                <a href="https://godotengine.github.io/doc-status/" target="_blank" class="nav-item">
+                    ClassRef Status
+                </a>
+                <a href="https://godot-proposals-viewer.github.io/" target="_blank" class="nav-item">
+                    Proposal Viewer
+                </a>
+                <a href="https://godotengine.github.io/godot-team-reports/" target="_blank" class="nav-item">
+                    Team Reports
+                </a>
+            </div>
+            <div
+                class="nav-toggler"
+                @click="${this._onMobileToggled}"
+            ></div>
+        `;
+    }
+}
diff --git a/src/static/icons/hamburger.svg b/src/static/icons/hamburger.svg
new file mode 100644
index 0000000..62f2938
--- /dev/null
+++ b/src/static/icons/hamburger.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m4 3c-1.108 0-2 .89201-2 2s.89201 2 2 2h16c1.108 0 2-.89201 2-2s-.89202-2-2-2zm0 6.7773c-1.108 0-2 .94178-2 2.1113s.89201 2.1113 2 2.1113h16c1.108 0 2-.94178 2-2.1113s-.89201-2.1113-2-2.1113zm0 7c-1.108 0-2 .94178-2 2.1113s.89203 2.1113 2 2.1113h16c1.108 0 2-.94178 2-2.1113s-.89203-2.1113-2-2.1113z" fill="#e0e0e0" /></svg>