Initial Drupal 11 with DDEV setup

web/core/themes/claro/js/nav-tabs.js

@@ -0,0 +1,90 @@
+/**
+ * @file
+ * Responsive navigation tabs.
+ *
+ * This also supports collapsible navigable is the 'is-collapsible' class is
+ * added to the main element, and a target element is included.
+ */
+(($, Drupal) => {
+  function init(tab) {
+    const $tab = $(tab);
+    const $target = $tab.find('[data-drupal-nav-tabs-target]');
+    const $active = $target.find('.js-active-tab');
+
+    const openMenu = () => {
+      $target.toggleClass('is-open');
+      $target.find('button').attr('aria-expanded', $target.hasClass('is-open'));
+    };
+
+    const toggleOrder = (reset) => {
+      const current = $active.index();
+      const original = $active.data('original-order');
+
+      // Do not change order if already first or if already reset.
+      if (original === 0 || reset === (current === original)) {
+        return;
+      }
+
+      const siblings = {
+        first: '[data-original-order="0"]',
+        previous: `[data-original-order="${original - 1}"]`,
+      };
+
+      const $first = $target.find(siblings.first);
+      const $previous = $target.find(siblings.previous);
+
+      if (reset && current !== original) {
+        $active.insertAfter($previous);
+      } else if (!reset && current === original) {
+        $active.insertBefore($first);
+      }
+    };
+
+    const toggleCollapsed = ({ matches }) => {
+      if (matches) {
+        if ($tab.hasClass('is-horizontal') && !$tab.attr('data-width')) {
+          let width = 0;
+
+          $target.find('.js-tabs-link').each((index, value) => {
+            width += $(value).outerWidth();
+          });
+          $tab.attr('data-width', width);
+        }
+
+        // Collapse the tabs if the combined width of the tabs is greater than
+        // the width of the parent container.
+        const isHorizontal = $tab.attr('data-width') <= $tab.outerWidth();
+        $tab.toggleClass('is-horizontal', isHorizontal);
+        $tab.find('button').attr('aria-expanded', null);
+        toggleOrder(isHorizontal);
+      } else {
+        toggleOrder(false);
+        $tab.find('button').attr('aria-expanded', 'false');
+      }
+    };
+
+    $tab.addClass('position-container is-horizontal-enabled');
+
+    $target.find('.js-tab').each((index, element) => {
+      const $item = $(element);
+      $item.attr('data-original-order', $item.index());
+    });
+
+    $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
+    const mql = window.matchMedia('(min-width: 48em)');
+    mql.addEventListener('change', toggleCollapsed);
+    toggleCollapsed(mql);
+  }
+  /**
+   * Initialize the tabs JS.
+   */
+  Drupal.behaviors.navTabs = {
+    attach(context) {
+      once(
+        'nav-tabs',
+        '[data-drupal-nav-tabs].is-collapsible',
+        context,
+      ).forEach(init);
+    },
+  };
+})(jQuery, Drupal);