Unverified Commit 4f8c468f authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3221871 by mherchel, Gauravmahlawat, W01F, nod_: Olivero: Mobile menu...

Issue #3221871 by mherchel, Gauravmahlawat, W01F, nod_: Olivero: Mobile menu prevents scroll & obscures page after click if menu item contains link to anchor on same page
parent 0c9dfc7d
Loading
Loading
Loading
Loading
+5 −0
Original line number Diff line number Diff line
@@ -21,3 +21,8 @@ olivero_test.child_button:
  parent: olivero_test.button
  menu_name: main
  weight: 100
olivero_test.anchor_link:
  title: "⚓️ Anchor link"
  url: "internal:#footer"
  menu_name: main
  weight: 200
+9 −0
Original line number Diff line number Diff line
@@ -163,4 +163,13 @@ module.exports = {
        },
      );
  },
  'Verify clicks on hashes close mobile menu': (browser) => {
    browser
      .drupalRelativeURL('/node')
      .waitForElementVisible('body')
      .click(mobileNavButtonSelector)
      .waitForElementVisible(headerNavSelector)
      .click('[href="#footer"]')
      .waitForElementNotVisible(headerNavSelector);
  },
};
+12 −0
Original line number Diff line number Diff line
@@ -113,6 +113,18 @@
      // Ensure that all sub-navigation menus close when the browser is resized.
      Drupal.olivero.closeAllSubNav();
    });

    // If hyperlink links to an anchor in the current page, close the
    // mobile menu after the click.
    props.navWrapper.addEventListener('click', (e) => {
      if (
        e.target.matches(
          `[href*="${window.location.pathname}#"], [href*="${window.location.pathname}#"] *, [href^="#"], [href^="#"] *`,
        )
      ) {
        toggleNav(props, false);
      }
    });
  }

  /**
+5 −0
Original line number Diff line number Diff line
@@ -73,6 +73,11 @@

      Drupal.olivero.closeAllSubNav();
    });
    props.navWrapper.addEventListener('click', function (e) {
      if (e.target.matches("[href*=\"".concat(window.location.pathname, "#\"], [href*=\"").concat(window.location.pathname, "#\"] *, [href^=\"#\"], [href^=\"#\"] *"))) {
        toggleNav(props, false);
      }
    });
  }

  Drupal.behaviors.oliveroNavigation = {