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

(cherry picked from commit 4f8c468f10)

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

@@ -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/oliveroMobileMenuTest.js

@@ -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

@@ -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

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