add mobile menu style

Author: fanixus96

scaladoc/resources/dotty_res/images/icon-buttons/close/dark/active.svg

@@ -33,6 +33,11 @@
   /* Wait for the DOM to be loaded before we try to attach event listeners to things in the DOM */
   window.addEventListener("DOMContentLoaded", () => {
     const themeToggler = document.querySelector('#theme-toggle');
+    const mobileThemeToggler = document.querySelector('#mobile-theme-toggle');
+    mobileThemeToggler.addEventListener("click", e => {
+      toggleDarkTheme(!currentlyDark);
+    });
+
     themeToggler.addEventListener("click", e => {
       toggleDarkTheme(!currentlyDark);
     });

scaladoc/resources/dotty_res/images/icon-buttons/close/dark/default.svg

@@ -317,6 +317,8 @@
 
 .theme-dark #mobile-menu-toggle.icon-button.menu-shown.selected::after {
   content: url("../../../../images/icon-buttons/menu-animated/dark/selected.svg");
+}
+
 /* gh button */
 
 .icon-button.gh::after {

scaladoc/resources/dotty_res/images/icon-buttons/close/dark/disabled.svg

@@ -2,7 +2,7 @@
   display: none;
   position: fixed;
   right: calc(3 * var(--base-spacing));
-  bottom: calc(3 * var(--base-spacing));
+  bottom: calc(10 * var(--base-spacing));
   height: calc(5 * var(--base-spacing));
   width: calc(5 * var(--base-spacing));
   background-color: var(--action-primary-background-default-solid);

scaladoc/resources/dotty_res/images/icon-buttons/close/dark/focus.svg

@@ -53,12 +53,33 @@
   display: none;
 }
 
+.projectVersion {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 950px) {
+  .projectVersion {
+    width: calc(6 * var(--base-spacing));
+  }
+
+  .header-container-right .text-button {
+    margin-left: calc(2 * var(--base-spacing));
+  }
+}
+
 @media (max-width: 768px) {
   #mobile-menu-toggle {
     margin-left: calc(3 * var(--base-spacing));
     display: block;
   }
 
+  .projectVersion {
+    width: auto;
+  }
+
   .header-container-right .text-button {
     display: none;
   }

scaladoc/resources/dotty_res/images/icon-buttons/close/dark/hover.svg

@@ -12,24 +12,15 @@
   border: 1px solid var(--border-default);
   border-top: none;
   border-left: none;
-  transition: width 0.5s;
+  transition:left 0.2s linear;
 }
 
 @media (max-width: 1024px) {
   #leftColumn {
-    width: 0px;
-  }
-
-  #leftColumn > .switcher-container {
-    display: none;
+    left: calc(-39 * var(--base-spacing));
   }
 
   #leftColumn.show {
-    width: 0px;
-    width: calc(39 * var(--base-spacing));
-  }
-
-  #leftColumn.show .switcher-container {
-    display: flex;
+    left: 0;
   }
 }