From 5fef41eb976f36fccbe5c0c486a6c490be8b55aa Mon Sep 17 00:00:00 2001
From: Chris Wilson <chris@legendserver.info>
Date: Fri, 10 Mar 2023 17:21:17 -0500
Subject: [PATCH] [WebHost] Make site header mobile-friendly (#1523)

---
 WebHostLib/static/assets/baseHeader.js        |  18 +++++
 .../button-images/hamburger-menu-icon.png     | Bin 0 -> 5659 bytes
 WebHostLib/static/styles/themes/base.css      |  63 +++++++++++++++++-
 WebHostLib/templates/header/baseHeader.html   |  13 ++++
 4 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 WebHostLib/static/assets/baseHeader.js
 create mode 100644 WebHostLib/static/static/button-images/hamburger-menu-icon.png

diff --git a/WebHostLib/static/assets/baseHeader.js b/WebHostLib/static/assets/baseHeader.js
new file mode 100644
index 00000000..b8ee82dd
--- /dev/null
+++ b/WebHostLib/static/assets/baseHeader.js
@@ -0,0 +1,18 @@
+window.addEventListener('load', () => {
+  const menuButton = document.getElementById('base-header-mobile-menu-button');
+  const mobileMenu = document.getElementById('base-header-mobile-menu');
+
+  menuButton.addEventListener('click', (evt) => {
+    evt.preventDefault();
+
+    if (!mobileMenu.style.display || mobileMenu.style.display === 'none') {
+      return mobileMenu.style.display = 'flex';
+    }
+
+    mobileMenu.style.display = 'none';
+  });
+
+  window.addEventListener('resize', () => {
+    mobileMenu.style.display = 'none';
+  });
+});
diff --git a/WebHostLib/static/static/button-images/hamburger-menu-icon.png b/WebHostLib/static/static/button-images/hamburger-menu-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1c96316358da657e3b81f484f0ebe58f212a5c3
GIT binary patch
literal 5659
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
Vw{<hO6pBfUw9CQr(wDvm{{!B(-TVLm

literal 0
HcmV?d00001

diff --git a/WebHostLib/static/styles/themes/base.css b/WebHostLib/static/styles/themes/base.css
index fca65a51..d38a8e61 100644
--- a/WebHostLib/static/styles/themes/base.css
+++ b/WebHostLib/static/styles/themes/base.css
@@ -42,7 +42,7 @@ html{
     margin-top: 4px;
 }
 
-#base-header a{
+#base-header a, #base-header-mobile-menu a{
     color: #2f6b83;
     text-decoration: none;
     cursor: pointer;
@@ -51,3 +51,64 @@ html{
     font-family: LondrinaSolid-Light, sans-serif;
     text-transform: uppercase;
 }
+
+#base-header-right-mobile{
+    display: none;
+    margin-top: 2rem;
+    margin-right: 1rem;
+}
+
+#base-header-mobile-menu{
+    display: none;
+    flex-direction: column;
+    background-color: #ffffff;
+    text-align: center;
+    overflow-y: auto;
+    z-index: 10000;
+    width: 100vw;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+
+    position: absolute;
+    top: 7rem;
+    right: 0;
+    padding-top: 1rem;
+}
+
+#base-header-mobile-menu a{
+    padding: 4rem 2rem;
+    font-size: 5rem;
+    line-height: 5rem;
+    color: #699ca8;
+    border-top: 1px solid #d3d3d3;
+}
+
+#base-header-right-mobile img{
+    height: 3rem;
+}
+
+@media all and (max-width: 1580px){
+    html{
+        padding-top: 260px;
+        scroll-padding-top: 230px;
+    }
+
+    #base-header{
+        height: 200px;
+        background-size: auto 200px;
+    }
+
+    #base-header #site-title img{
+        height: calc(38px * 2);
+        margin-top: 30px;
+        margin-left: 20px;
+    }
+
+    #base-header-right{
+        display: none;
+    }
+
+    #base-header-right-mobile{
+        display: unset;
+    }
+}
diff --git a/WebHostLib/templates/header/baseHeader.html b/WebHostLib/templates/header/baseHeader.html
index a76835b5..80e8d622 100644
--- a/WebHostLib/templates/header/baseHeader.html
+++ b/WebHostLib/templates/header/baseHeader.html
@@ -1,5 +1,6 @@
 {% block head %}
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/themes/base.css") }}" />
+    <script type="application/ecmascript" src="{{ url_for('static', filename="assets/baseHeader.js") }}"></script>
 {% endblock %}
 
 {% block header %}
@@ -16,5 +17,17 @@
             <a href="/faq/en">f.a.q.</a>
             <a href="https://discord.gg/8Z65BR2" target="_blank">discord</a>
         </div>
+        <div id="base-header-right-mobile">
+            <a id="base-header-mobile-menu-button" href="#">
+                <img src="/static/static/button-images/hamburger-menu-icon.png" alt="Menu" />
+            </a>
+        </div>
     </header>
+    <div id="base-header-mobile-menu">
+        <a href="/games">supported games</a>
+        <a href="/tutorial">setup guides</a>
+        <a href="/start-playing">start playing</a>
+        <a href="/faq/en">f.a.q.</a>
+        <a href="https://discord.gg/8Z65BR2" target="_blank">discord</a>
+    </div>
 {% endblock %}