Merge pull request #1782 from euphemism/sub-menu-positioning

Smarter sub-menu positioning on narrow displays

Author: GuillaumeGomez

static/menu.js

@@ -1,9 +1,19 @@
+const updateMenuPositionForSubMenu = (currentMenuSupplier) => {
+    const currentMenu = currentMenuSupplier();
+    const subMenu = currentMenu?.getElementsByClassName('pure-menu-children')?.[0];
+
+    subMenu?.style.setProperty('--menu-x', `${currentMenu.getBoundingClientRect().x}px`);
+}
+
 // Allow menus to be open and used by keyboard.
 (function() {
     var currentMenu;
     var backdrop = document.createElement("div");
     backdrop.style = "display:none;position:fixed;width:100%;height:100%;z-index:1";
     document.documentElement.insertBefore(backdrop, document.querySelector("body"));
+
+    addEventListener('resize', () => updateMenuPositionForSubMenu(() => currentMenu));
+
     function previous(allItems, item) {
         var i = 1;
         var l = allItems.length;
@@ -52,6 +62,9 @@
             this.blur();
         } else {
             if (currentMenu) closeMenu();
+
+            updateMenuPositionForSubMenu(() => this.parentNode);
+
             openMenu(this.parentNode);
         }
         e.preventDefault();

templates/style/_navbar.scss

@@ -50,6 +50,12 @@ div.nav-container {
         }
     }
 
+    .pure-menu-has-children.pure-menu-active > .pure-menu-link {
+        &:after {
+            content:"\25B2";
+        }
+    }
+
     .pure-menu-link {
         font-size: 12.8px;
         font-weight: 400;
@@ -133,11 +139,20 @@ div.nav-container {
     }
 
     .pure-menu-children {
+        --menu-x: 0;
+
+        // #{} interpolates a SassScript expression. Using this prevents
+        // SASS from using its built-in min/max over the CSS min/max functions
+        --clamped-offset: m#{i}n(var(--menu-x), calc(100vw - 100%));
+
         border: 1px solid var(--color-border);
         border-radius: 0 0 2px 2px;
-        margin-left: -1px;
         background-color: var(--color-background);
 
+        left: 0;
+        position: fixed;
+        transform: translateX(m#{a}x(0%, var(--clamped-offset)));
+
         li {
             border-left: none;
         }