add mobile-menu

fanixus96 · fanixus96 · commit 676178e30e68 · 2022-04-29T10:07:46.000+02:00
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/dark/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#CCCCCC"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#CCCCCC"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/dark/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#A09FA6"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/dark/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#A09FA6"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/dark/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#A09FA6"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/dark/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#CCCCCC"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#CCCCCC"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/dark/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#EDEDEF"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#EDEDEF"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/light/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#1A1523"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/light/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#6F6E77"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/light/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#6F6E77"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/light/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#6F6E77"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/light/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#1A1523"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/light/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/menu-animated-open/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="M11.7066 4.04469C11.8853 4.12576 12 4.30382 12 4.50001L12 11.5C12 11.6962 11.8853 11.8743 11.7066 11.9553C11.528 12.0364 11.3184 12.0055 11.1707 11.8763L7.17075 8.3763C7.06224 8.28135 7 8.14419 7 8.00001C7 7.85583 7.06224 7.71866 7.17075 7.62372L11.1707 4.12372C11.3184 3.99453 11.528 3.96362 11.7066 4.04469Z" fill="#1A1523"/>
+<path d="M4 2.75C4 2.33579 4.33579 2 4.75 2C5.16421 2 5.5 2.33579 5.5 2.75V13.25C5.5 13.6642 5.16421 14 4.75 14C4.33579 14 4 13.6642 4 13.25V2.75Z" fill="#1A1523"/>
+</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
@@ -1,4 +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"/>
+<rect x="3" y="2" width="1.5" height="12" rx="0.75" fill="#A09FA6"/>
 </svg>
diff --git a/scaladoc/resources/dotty_res/scripts/ux.js b/scaladoc/resources/dotty_res/scripts/ux.js
@@ -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;
diff --git a/scaladoc/resources/dotty_res/styles/theme/colors.css b/scaladoc/resources/dotty_res/styles/theme/colors.css
@@ -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);
 }
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/floatingButton.css b/scaladoc/resources/dotty_res/styles/theme/layout/floatingButton.css
@@ -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) {
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/mobileMenu.css b/scaladoc/resources/dotty_res/styles/theme/layout/mobileMenu.css
@@ -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));;
+}
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
@@ -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(
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
@@ -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(),
     )
