Fix menu behaviour on mobile devices. (#5439)

Author: clydebarrow

themes/esphome-theme/assets/css/main.css

@@ -538,10 +538,6 @@ img.align-right, figure.align-right, .figure.align-right, object.align-right {
   color: var(--nav-text);
 }
 
-.dropdown:hover .dropdown-content {
-  display: block;
-}
-
 /* Search Box Styles */
 .nav-search {
   margin-left: 20px;
@@ -1250,13 +1246,27 @@ figcaption {
   .overlay.show, .sidebar-mobile {
     display: none;
   }
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
 }
 
+/* Mobile, narrow screen. Open menu inline, hide some items */
 @media (max-width: 700px) {
-    .desktop-only {
-        display: none;
-    }
+  .desktop-only {
+    display: none;
+  }
+  .dropdown-content {
+    position: relative;
+    width: 100%;
+    top: 0;
+    right: 0;
+  }
+  .nav-links.active {
+    overflow-y: auto;
+  }
 }
+
 /* Responsive */
 /* @media (max-width: var(--mobile-width-stop)) {  // sadly does not work */
 @media (max-width: 1000px) {
@@ -1304,17 +1314,21 @@ figcaption {
     z-index: 0;
     display: none;
     height: 0;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
   }
 
   .nav-links.active {
     display: flex;
     opacity: 100%;
     z-index: 1000;
     height: fit-content;
+    max-height: 100vh;
     transition: height 0.3s ease, opacity 0.3s ease;
   }
 
   .dropdown {
+    position: relative;
     margin-right: 0;
     margin-bottom: 1em;
     width: 100%;

themes/esphome-theme/assets/js/menu.js

@@ -1,7 +1,9 @@
 
 const bodystyle = window.getComputedStyle(document.body);
 const mobileWidthStop = parseInt(bodystyle.getPropertyValue('--mobile-width-stop'));
-const isMobile = (window.innerWidth <= mobileWidthStop);
+function isMobileScreen() {
+    return (window.innerWidth <= mobileWidthStop);
+}
 
 function closeMenu() {
     const hamburger = document.querySelector('.hamburger-button');
@@ -20,7 +22,7 @@ function openMenu() {
 }
 function openTOC() {
     const tocToggle = document.getElementById('toc-toggle');
-    if (!isMobile || !tocToggle) return;
+    if (!isMobileScreen() || !tocToggle) return;
     const tocPanel = document.getElementsByClassName('sidebar-mobile')[0];
     const overlay = document.getElementById('overlay');
     tocToggle.classList.add('open');
@@ -30,7 +32,7 @@ function openTOC() {
 
 function closeTOC() {
     const tocToggle = document.getElementById('toc-toggle');
-    if (!isMobile || !tocToggle) return;
+    if (!isMobileScreen() || !tocToggle) return;
     const tocPanel = document.getElementsByClassName('sidebar-mobile')[0];
     const overlay = document.getElementById('overlay');
     tocToggle.classList.remove('open');
@@ -85,7 +87,7 @@ document.addEventListener('DOMContentLoaded', function() {
         sidebar.addEventListener("click", closeTOC);
     })
 
-    const dropdownButtons = document.querySelectorAll('.dropbtn button');
+    const dropdownButtons = document.querySelectorAll('.dropdown button');
 
     dropdownButtons.forEach(button => {
         // Handle Enter and Space key presses
@@ -98,7 +100,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // Handle click events
         button.addEventListener('click', function(e) {
-            if (!isMobile) return;
+            if (!isMobileScreen()) return;
             e.preventDefault();
             // Close others
             dropdownButtons.forEach(function(otherBtn) {