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