Issue #3526180 by mherchel, godotislate: Regression: Drupal.displace() not...

Issue #3526180 by mherchel, godotislate: Regression: Drupal.displace() not working on new Navigation module in 11.2

(cherry picked from commit 5aa1596b)

core/modules/navigation/js/admin-toolbar-wrapper.js

@@ -81,31 +81,35 @@
 
         Drupal.displace(true);
       });
-
-      /**
-       * Initialize Drupal.displace()
-       *
-       * We add the displace attribute to a separate full width element because we
-       * don't want this element to have transitions. Note that this element and the
-       * navbar share the same exact width.
-       */
-      const initDisplace = () => {
-        const displaceElement = doc
-          .querySelector('.admin-toolbar')
-          ?.querySelector('.admin-toolbar__displace-placeholder');
-        const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';
-        displaceElement?.setAttribute(`data-offset-${edge}`, '');
-        Drupal.displace(true);
-      };
-
-      initDisplace();
     }
 
+    /**
+     * Initialize Drupal.displace()
+     *
+     * We add the displace attribute to a separate full width element because we
+     * don't want this element to have transitions. Note that this element and the
+     * navbar share the same exact width.
+     *
+     * @param {HTMLElement} el - The admin toolbar wrapper.
+     */
+    const initDisplace = (el) => {
+      const displaceElement = el.querySelector(
+        '.admin-toolbar__displace-placeholder',
+      );
+      const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left';
+      displaceElement?.setAttribute(`data-offset-${edge}`, '');
+      Drupal.displace(true);
+    };
+
     // Any triggers on page. Inside or outside sidebar.
     // For now button in sidebar + mobile header and background.
 
     Drupal.behaviors.navigationProcessToolbarTriggers = {
       attach: (context) => {
+        once('navigation-displace', '.admin-toolbar', context).forEach(
+          initDisplace,
+        );
+
         const triggers = once(
           'admin-toolbar-trigger',
           '[aria-controls="admin-toolbar"]',

core/modules/navigation/tests/src/Nightwatch/Tests/navigationDisplaceTest.js

+/**
+ * Verify that Drupal.displace() attribute is properly added by JavaScript.
+ */
+module.exports = {
+  '@tags': ['core', 'navigation'],
+  browser(browser) {
+    browser
+      .drupalInstall()
+      .drupalInstallModule('navigation', true)
+      .drupalInstallModule('big_pipe')
+      .setWindowSize(1220, 800);
+  },
+  after(browser) {
+    browser.drupalUninstall();
+  },
+
+  'Verify displace attribute': (browser) => {
+    browser.drupalLoginAsAdmin(() => {
+      browser
+        .drupalRelativeURL('/admin/')
+        .waitForElementPresent(
+          '.admin-toolbar__displace-placeholder[data-offset-left]',
+        );
+    });
+  },
+};