[WebHost] Make site header mobile-friendly (#1523)

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';
+  });
+});

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;
+    }
+}

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 %}