Resolve #3406162 "Automatic scroll for"

Closes #3406162

js/toolbar-menu-scroll.js

+((Drupal, once) => {
+  Drupal.behaviors.customDropdownScroll = {
+    attach: (context) => {
+      once(
+        'toolbar-block__list',
+        // Complete toolbar menu list.
+        context.querySelectorAll('.toolbar-block__list'),
+      ).forEach((context) => {
+        context.addEventListener('click', (event) => {
+          // The complete menu list that is being clicked.
+          const toolbarList = event.target.closest('.toolbar-block__list');
+          if (!toolbarList) return;
+          // Particular menu that got clicked.
+          const clickedMenuItem = event.target.closest('li');
+          if (!clickedMenuItem) return;
+
+          if (clickedMenuItem.classList.contains('toolbar-popover--expanded')) {
+            // li.toolbar-popover--expanded
+            const clickedNestedList = clickedMenuItem.querySelector('ul');
+            if (clickedNestedList) {
+              // Dispatch custom event for scrolling to the nested list
+              customEvent = new CustomEvent('scrollToNestedList', {
+                detail: {
+                  offsetTop: clickedMenuItem.offsetTop,
+                },
+              });
+              document.dispatchEvent(customEvent);
+            }
+          } else {
+            //  Menu inside menu(eg - Structure > Display Modes).
+            const nestedMenu = event.target.closest('li');
+            if (!nestedMenu) return;
+            // Getting its button tag to check whether it is expanded or not.
+            const nestedMenuLiButton = nestedMenu.querySelector('button');
+            const nestedMenuParent = nestedMenu.closest(
+              '.toolbar-popover--expanded',
+            );
+            if (!nestedMenuLiButton) return;
+
+            // Checking it is expanded or not.
+            const nestedMenuIsExpanded =
+              nestedMenuLiButton.getAttribute('aria-expanded') === 'true';
+            if (nestedMenuIsExpanded) {
+              // Dispatch custom event for scrolling to the nested menu.
+              // Scrolling it to its parent offset.
+              customEvent = new CustomEvent('scrollToNestedMenu', {
+                detail: {
+                  // Scrolling to its parent menu so that its parent menu won't get lost.
+                  offsetTop: nestedMenuParent.offsetTop,
+                },
+              });
+              document.dispatchEvent(customEvent);
+            }
+          }
+        });
+      });
+    },
+  };
+})(Drupal, once);
+
+// Event listener for scrolling to nested list
+document.addEventListener('scrollToNestedList', (event) => {
+  document.querySelector('nav.admin-toolbar__content').scroll({
+    top: event.detail.offsetTop,
+    behavior: 'smooth',
+  });
+});
+
+// Event listener for scrolling to nested menu
+document.addEventListener('scrollToNestedMenu', (event) => {
+  document.querySelector('nav.admin-toolbar__content').scroll({
+    top: event.detail.offsetTop,
+    behavior: 'smooth',
+  });
+});