add mobile-menu

Author: fanixus96

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

@@ -112,6 +112,16 @@ window.addEventListener("DOMContentLoaded", () => {
     document.getElementById("leftColumn").classList.toggle("show")
     sideMenuToggler.classList.toggle("menu-shown")
   })
+
+    // show/hide mobile menu on mobile view
+    const mobileMenuOpenIcon = document.getElementById("mobile-menu-toggle");
+    const mobileMenuCloseIcon = document.getElementById("mobile-menu-close");
+    mobileMenuOpenIcon.addEventListener('click', _e => {
+      document.getElementById("mobile-menu").classList.add("show")
+    })
+    mobileMenuCloseIcon.addEventListener('click', _e => {
+      document.getElementById("mobile-menu").classList.remove("show")
+    })
 });
 
 var zoom;

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

@@ -157,12 +157,12 @@
   --orange12: #451e11;
 
   /* shadow color */
-  --shadow1: rgba(0, 0, 0, 0.6);
-  --shadow2: rgba(0, 0, 0, 0.75);
+  --shadow1: rgba(14, 18, 22, 0.2);
+  --shadow2: rgba(14, 18, 22, 0.35);
 }
 
 /*
-    dakr theme
+    dark theme
 */
 :root.theme-dark {
   --grey1: #161618;
@@ -319,6 +319,6 @@
   --orange12: #feeadd;
 
   /* shadow color */
-  --shadow1: rgba(14, 18, 22, 0.2);
-  --shadow2: rgba(14, 18, 22, 0.35);
+  --shadow1: rgba(0, 0, 0, 0.6);
+  --shadow2: rgba(0, 0, 0, 0.75);
 }

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

@@ -1,14 +1,120 @@
 .floating-button {
   display: none;
   position: fixed;
-  right: calc(6 * var(--base-spacing));
-  bottom: calc(6 * var(--base-spacing));
+  right: calc(3 * var(--base-spacing));
+  bottom: calc(3 * 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);
+    border: none;
+  border-radius: 4px;
+}
+
+.floating-button:disabled {
+  opacity: 0.5;
+}
+
+.floating-button:focus-visible {
+  box-shadow: 0px 0px 0px 2px var(--focus-default);
+}
+
+#mobile-sidebar-toggle::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/default.svg");
+}
+
+#mobile-sidebar-toggle:hover::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/hover.svg");
+}
+
+#mobile-sidebar-toggle:active::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/active.svg");
+}
+
+#mobile-sidebar-toggle:disabled::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/disabled.svg");
+}
+
+#mobile-sidebar-toggle:focus::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/focus.svg");
+}
+
+#mobile-sidebar-toggle.selected::after {
+  content: url("../../../../images/icon-buttons/menu-animated/light/selected.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/default.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle:hover::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/hover.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle:active::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/active.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle:disabled::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/disabled.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle:focus::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/focus.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle.selected::after {
+  content: url("../../../../images/icon-buttons/menu-animated/dark/selected.svg");
+}
+
+#mobile-sidebar-toggle.menu-shown::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/light/default.svg");
+}
+
+#mobile-sidebar-toggle.menu-shown:hover::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/light/hover.svg");
+}
+
+#mobile-sidebar-toggle.menu-shown:active::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/light/active.svg");
+}
+
+#mobile-sidebar-toggle.menu-shown:disabled::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/light/disabled.svg");
+}
+
+#mobile-sidebar-toggle.menu-shown:focus::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/light/focus.svg");
+}
+
+#mobile-sidebar-toggle.menu-shown.selected::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/light/selected.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle.menu-shown::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/dark/default.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle.menu-shown:hover::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/dark/hover.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle.menu-shown:active::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/dark/active.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle.menu-shown:disabled::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/dark/disabled.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle.menu-shown:focus::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/dark/focus.svg");
+}
+
+.theme-dark #mobile-sidebar-toggle.menu-shown.selected::after {
+  content: url("../../../../images/icon-buttons/menu-animated-open/dark/selected.svg");
 }
 
 @media (max-width: 1024px) {

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

@@ -0,0 +1,41 @@
+#mobile-menu {
+  display: none;
+  position: absolute;
+  background-color: var(--background-default);
+  top: 0;
+  left: 0;
+  height: calc(100% - calc(6 * var(--base-spacing)));
+  width: 100%;
+}
+
+#mobile-menu.show {
+  display: block;
+}
+
+@media(min-width: 768px){
+  #mobile-menu {
+    display: none;
+  }
+
+  #mobile-menu.show {
+    display: none;
+  }
+}
+
+.mobile-menu-header {
+  height: calc(8 * var(--base-spacing));
+  border: 1px solid var(--border-default);
+  display: flex;
+}
+
+.mobile-menu-container {
+  padding: calc(3 * var(--base-spacing));
+}
+
+.mobile-menu-item {
+  display: block;
+  text-decoration: none;
+  color: var(--action-primary-content-default);
+  border-bottom: 1px solid var(--border-default);
+  padding: calc(1.5 * var(--base-spacing)) calc(2 * var(--base-spacing));;
+}

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

@@ -244,6 +244,35 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           button(id := "mobile-menu-toggle", cls := "icon-button hamburger"),
         ),
       ),
+      div(id := "mobile-menu")(
+        div(cls := "mobile-menu-header")(
+          span(cls := "mobile-menu-logo"),
+          button(id := "mobile-menu-close", cls := "icon-button close"),
+        ),
+        div(cls := "mobile-menu-container body-medium")(
+          a(href := "https://www.scala-lang.org/download/", cls := "mobile-menu-item") (
+            "Download",
+          ),
+          a(href := "https://docs.scala-lang.org/", cls := "mobile-menu-item") (
+            "Documentation",
+          ),
+          a(href := "https://index.scala-lang.org", cls := "mobile-menu-item") (
+            "Libraries",
+          ),
+          a(href := "https://www.scala-lang.org/contribute/", cls := "mobile-menu-item") (
+            "Contribute",
+          ),
+          a(href := "https://www.scala-lang.org/contribute/", cls := "mobile-menu-item") (
+            "Blog",
+          ),
+          a(href := "https://www.scala-lang.org/blog/", cls := "mobile-menu-item") (
+            "Community",
+          ),
+          span(cls := "mobile-menu-item") (
+            "Light mode"
+          )
+        )
+      ),
       button(id := "mobile-sidebar-toggle", cls := "floating-button"),
       div(id := "leftColumn", cls := "body-small")(
         Seq(

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

@@ -109,6 +109,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       "styles/theme/layout/sideMenu.css",
       "styles/theme/layout/searchBar.css",
       "styles/theme/layout/floatingButton.css",
+      "styles/theme/layout/mobileMenu.css",
 
       // components
       "styles/theme/components/switcher.css",
@@ -353,6 +354,18 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       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"),
+      dottyRes("images/icon-buttons/menu-animated-open/dark/active.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/dark/disabled.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/dark/focus.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/dark/hover.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/dark/selected.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/dark/default.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/light/active.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/light/disabled.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/light/focus.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/light/hover.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/light/selected.svg"),
+      dottyRes("images/icon-buttons/menu-animated-open/light/default.svg"),
       searchData(pages),
       scastieConfiguration(),
     )