--- /dev/null
+/**
+ * @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.
+ */
+(function ($, Drupal) {
+ function init(i, tab) {
+ const $tab = $(tab);
+ const $target = $tab.find('[data-drupal-nav-tabs-target]');
+ const isCollapsible = $tab.hasClass('is-collapsible');
+
+ function openMenu(e) {
+ $target.toggleClass('is-open');
+ }
+
+ function handleResize(e) {
+ $tab.addClass('is-horizontal');
+ const $tabs = $tab.find('.tabs');
+ const isHorizontal = $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
+ $tab.toggleClass('is-horizontal', isHorizontal);
+ if (isCollapsible) {
+ $tab.toggleClass('is-collapse-enabled', !isHorizontal);
+ }
+ if (isHorizontal) {
+ $target.removeClass('is-open');
+ }
+ }
+
+ $tab.addClass('position-container is-horizontal-enabled');
+
+ $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
+ $(window).on('resize.tabs', Drupal.debounce(handleResize, 150)).trigger('resize.tabs');
+ }
+
+ /**
+ * Initialise the tabs JS.
+ */
+ Drupal.behaviors.navTabs = {
+ attach(context, settings) {
+ const $tabs = $(context).find('[data-drupal-nav-tabs]');
+ if ($tabs.length) {
+ const notSmartPhone = window.matchMedia('(min-width: 300px)');
+ if (notSmartPhone.matches) {
+ $tabs.once('nav-tabs').each(init);
+ }
+ }
+ },
+ };
+}(jQuery, Drupal));