add floating button for mobile sidebar menu

Author: Filip Łukasik

scaladoc/resources/dotty_res/scripts/ux.js

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

scaladoc/resources/dotty_res/styles/theme/layout/floatingButton.css

@@ -0,0 +1,18 @@
+.floating-button {
+  display: none;
+  position: fixed;
+  right: calc(6 * var(--base-spacing));
+  bottom: calc(6 * var(--base-spacing));
+  height: calc(5 * var(--base-spacing));
+  width: calc(5 * var(--base-spacing));
+  background-color: var(--action-primary-background-default-solid);
+  box-shadow: 0px 10px 38px -10px var(--shadow-first),
+    0px 10px 20px -15px var(--shadow-second),
+    inset 0px 0px 0px 1px var(--shadow-inset);
+}
+
+@media (max-width: 1024px) {
+  .floating-button {
+    display: block;
+  }
+}

scaladoc/resources/dotty_res/styles/theme/layout/header.css

@@ -53,9 +53,13 @@
   display: none;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   #mobile-menu-toggle {
     margin-left: calc(3 * var(--base-spacing));
     display: block;
   }
+
+  .header-container-right .text-button {
+    display: none;
+  }
 }

scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala

@@ -244,6 +244,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           button(id := "mobile-menu-toggle", cls := "icon-button hamburger"),
         ),
       ),
+      button(id := "mobile-sidebar-toggle", cls := "floating-button"),
       div(id := "leftColumn", cls := "body-small")(
         Seq(
           div(cls:= "switcher-container")(

scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala

@@ -108,6 +108,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       "styles/theme/layout/leftMenu.css",
       "styles/theme/layout/sideMenu.css",
       "styles/theme/layout/searchBar.css",
+      "styles/theme/layout/floatingButton.css",
 
       // components
       "styles/theme/components/switcher.css",