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

core/modules/system/tests/modules/olivero_test/olivero_test.links.menu.yml

+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

core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroMobileMenuTest.js

+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);

  },

};

core/themes/olivero/js/navigation.es6.js

+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);

      }

    });

  }



  /**

core/themes/olivero/js/navigation.js

+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 = {