add button to controll sidemenu in mobile view

Author: Filip Łukasik

scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/default.svg

@@ -105,6 +105,13 @@ window.addEventListener("DOMContentLoaded", () => {
       }
     }
   })
+
+  // show/hide side menu on mobile view
+  const sideMenuToggler = document.getElementById("mobile-menu-toggle");
+  sideMenuToggler.addEventListener('click', _e => {
+    document.getElementById("leftColumn").classList.toggle("show")
+    sideMenuToggler.classList.toggle("menu-shown")
+  })
 });
 
 var zoom;

scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/focus.svg

@@ -266,3 +266,53 @@
 .theme-dark .ar.icon-button.expanded.selected::after {
   content: url("../../../../images/icon-buttons/arrow-down/dark/selected.svg");
 }
+
+/* mobile menu toggler */
+
+#mobile-menu-toggle.icon-button.menu-shown::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/default.svg");
+}
+
+#mobile-menu-toggle.icon-button.menu-shown:hover::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/hover.svg");
+}
+
+#mobile-menu-toggle.icon-button.menu-shown:active::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/active.svg");
+}
+
+#mobile-menu-toggle.icon-button.menu-shown:disabled::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/disabled.svg");
+}
+
+#mobile-menu-toggle.icon-button.menu-shown:focus::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/focus.svg");
+}
+
+#mobile-menu-toggle.icon-button.menu-shown.selected::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/selected.svg");
+}
+
+.theme-dark #mobile-menu-toggle.icon-button.menu-shown::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/default.svg");
+}
+
+.theme-dark #mobile-menu-toggle.icon-button.menu-shown:hover::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/hover.svg");
+}
+
+.theme-dark #mobile-menu-toggle.icon-button.menu-shown:active::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/active.svg");
+}
+
+.theme-dark #mobile-menu-toggle.icon-button.menu-shown:disabled::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/disabled.svg");
+}
+
+.theme-dark #mobile-menu-toggle.icon-button.menu-shown:focus::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/focus.svg");
+}
+
+.theme-dark #mobile-menu-toggle.icon-button.menu-shown.selected::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/selected.svg");
+}

scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/selected.svg

@@ -16,15 +16,15 @@
 }
 
 #dark-project-logo {
-  display:none;
+  display: none;
 }
 
 :root.theme-dark #dark-project-logo {
-  display:unset;
+  display: unset;
 }
 
 :root.theme-dark #project-logo {
-  display:none;
+  display: none;
 }
 
 .header-container-left {
@@ -48,3 +48,14 @@
 .header-container-right #theme-toggle {
   margin-left: calc(3 * var(--base-spacing));
 }
+
+#mobile-menu-toggle {
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  #mobile-menu-toggle {
+    margin-left: calc(3 * var(--base-spacing));
+    display: block;
+  }
+}

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

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

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

@@ -241,6 +241,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
               "Community",
             ),
           button(id := "theme-toggle", cls := "icon-button"),
+          button(id := "mobile-menu-toggle", cls := "icon-button hamburger"),
         ),
       ),
       div(id := "leftColumn", cls := "body-small")(

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

@@ -340,6 +340,18 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       dottyRes("images/bulb/light/default.svg"),
       dottyRes("images/info/light/default.svg"),
       dottyRes("images/info/dark/default.svg"),
+      dottyRes("images/icon-buttons/menu-animated/dark/active.svg"),
+      dottyRes("images/icon-buttons/menu-animated/dark/disabled.svg"),
+      dottyRes("images/icon-buttons/menu-animated/dark/focus.svg"),
+      dottyRes("images/icon-buttons/menu-animated/dark/hover.svg"),
+      dottyRes("images/icon-buttons/menu-animated/dark/selected.svg"),
+      dottyRes("images/icon-buttons/menu-animated/dark/default.svg"),
+      dottyRes("images/icon-buttons/menu-animated/light/active.svg"),
+      dottyRes("images/icon-buttons/menu-animated/light/disabled.svg"),
+      dottyRes("images/icon-buttons/menu-animated/light/focus.svg"),
+      dottyRes("images/icon-buttons/menu-animated/light/hover.svg"),
+      dottyRes("images/icon-buttons/menu-animated/light/selected.svg"),
+      dottyRes("images/icon-buttons/menu-animated/light/default.svg"),
       searchData(pages),
       scastieConfiguration(),
     )