add button to controll sidemenu in mobile view

Filip Łukasik · Filip Łukasik · commit 611a3dbb46da · 2022-04-26T10:07:25.000+02:00
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/default.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29339 11.9553C6.11474 11.8743 6 11.6962 6 11.5V4.50001C6 4.30382 6.11474 4.12576 6.29339 4.04469C6.47205 3.96362 6.68161 3.99453 6.82925 4.12372L10.8293 7.62372C10.9378 7.71866 11 7.85583 11 8.00001C11 8.14419 10.9378 8.28135 10.8293 8.3763L6.82925 11.8763C6.68161 12.0055 6.47205 12.0364 6.29339 11.9553Z" fill="#6F6E77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29339 11.9553C6.11474 11.8743 6 11.6962 6 11.5V4.50001C6 4.30382 6.11474 4.12576 6.29339 4.04469C6.47205 3.96362 6.68161 3.99453 6.82925 4.12372L10.8293 7.62372C10.9378 7.71866 11 7.85583 11 8.00001C11 8.14419 10.9378 8.28135 10.8293 8.3763L6.82925 11.8763C6.68161 12.0055 6.47205 12.0364 6.29339 11.9553Z" fill="#A09FA6"/>
 </svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/focus.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29339 11.9553C6.11474 11.8743 6 11.6962 6 11.5V4.50001C6 4.30382 6.11474 4.12576 6.29339 4.04469C6.47205 3.96362 6.68161 3.99453 6.82925 4.12372L10.8293 7.62372C10.9378 7.71866 11 7.85583 11 8.00001C11 8.14419 10.9378 8.28135 10.8293 8.3763L6.82925 11.8763C6.68161 12.0055 6.47205 12.0364 6.29339 11.9553Z" fill="#6F6E77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29339 11.9553C6.11474 11.8743 6 11.6962 6 11.5V4.50001C6 4.30382 6.11474 4.12576 6.29339 4.04469C6.47205 3.96362 6.68161 3.99453 6.82925 4.12372L10.8293 7.62372C10.9378 7.71866 11 7.85583 11 8.00001C11 8.14419 10.9378 8.28135 10.8293 8.3763L6.82925 11.8763C6.68161 12.0055 6.47205 12.0364 6.29339 11.9553Z" fill="#A09FA6"/>
 </svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/arrow-right/light/selected.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29339 11.9553C6.11474 11.8743 6 11.6962 6 11.5V4.50001C6 4.30382 6.11474 4.12576 6.29339 4.04469C6.47205 3.96362 6.68161 3.99453 6.82925 4.12372L10.8293 7.62372C10.9378 7.71866 11 7.85583 11 8.00001C11 8.14419 10.9378 8.28135 10.8293 8.3763L6.82925 11.8763C6.68161 12.0055 6.47205 12.0364 6.29339 11.9553Z" fill="#1A1523"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29339 11.9553C6.11474 11.8743 6 11.6962 6 11.5V4.50001C6 4.30382 6.11474 4.12576 6.29339 4.04469C6.47205 3.96362 6.68161 3.99453 6.82925 4.12372L10.8293 7.62372C10.9378 7.71866 11 7.85583 11 8.00001C11 8.14419 10.9378 8.28135 10.8293 8.3763L6.82925 11.8763C6.68161 12.0055 6.47205 12.0364 6.29339 11.9553Z" fill="#A09FA6"/>
 </svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/active.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#CCCCCC"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#CCCCCC"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/default.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#A09FA6"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/disabled.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#A09FA6"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/focus.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#A09FA6"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/hover.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#CCCCCC"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#CCCCCC"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/dark/selected.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#EDEDEF"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#EDEDEF"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/active.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#1A1523"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/default.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#6F6E77"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/disabled.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#6F6E77"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/focus.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#6F6E77"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/hover.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#1A1523"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated/light/selected.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29339 11.9553C8.11474 11.8743 8 11.6962 8 11.5L8 4.50001C8 4.30382 8.11474 4.12576 8.29339 4.04469C8.47205 3.96362 8.68161 3.99453 8.82925 4.12372L12.8293 7.62372C12.9378 7.71866 13 7.85583 13 8.00001C13 8.14419 12.9378 8.28135 12.8293 8.3763L8.82925 11.8763C8.68161 12.0055 8.47205 12.0364 8.29339 11.9553Z" fill="#1A1523"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/scripts/ux.js b/scaladoc/resources/dotty_res/scripts/ux.js
@@ -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;
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css b/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css
@@ -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");
+}
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/header.css b/scaladoc/resources/dotty_res/styles/theme/layout/header.css
@@ -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;
+  }
+}
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/leftMenu.css b/scaladoc/resources/dotty_res/styles/theme/layout/leftMenu.css
@@ -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;
+  }
 }
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
@@ -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")(
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
@@ -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(),
     )
