Issue #3425773 by agami4: Improve secondary nav behavior

assets/js/navbar-secondary.min.js

-!function(p,i){Drupal.behaviors.navbarSecondaryScrollable={attach:function(u){p(window).on("load",function(){i("navbar-secondary",".navbar-secondary .navbar-scrollable",u).forEach(function(i){var t=p(i),n=t.find(".nav",u),l=n.find("li",u),e=t.width(),a=n.width(),o=p(".region--content");function s(){900<=p(window).width()?e<a?n.each(function(){var i=p(this),n=0;l.removeClass("visible-item"),i.find(".caret").remove(),l.parent().is("div")&&l.unwrap();for(var e=0;e<l.length&&(n+=p(l[e]).width(),!(t.width()-50<=n));++e)p(l[e]).addClass("visible-item");i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'),i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'),i.append('<span class="caret"></span>');var a=i.find(".hidden-list"),s=i.find(".caret");s.on("click",function(){a.is(":hidden")?(o.addClass("js--z-index"),a.slideDown("300")):a.slideUp("300",function(){o.removeClass("js--z-index")}),p(this).toggleClass("active")}),p(document).on("click",function(i){i.stopPropagation(),p(i.target).closest(".navbar-secondary").length||(a.slideUp(300,function(){o.removeClass("js--z-index")}),s.removeClass("active"))})}):n.css("display","flex"):n.each(function(){var i=p(this);l.removeClass("visible-item"),i.find(".caret").remove(),l.parent().is("div")&&l.unwrap()})}s();var d,r,c,v,f=(d=function(){s()},r=250,function(){var i=this,n=arguments,e=c&&!v;clearTimeout(v),v=setTimeout(function(){v=null,c||d.apply(i,n)},r),e&&d.apply(i,n)});window.addEventListener("resize",f)})})}}}(jQuery,once);
\ No newline at end of file
+!function (o, v) {
+  Drupal.behaviors.navbarSecondaryScrollable = {
+    attach: function (c) {
+      var i = c.classList && c.classList.contains("navbar-scrollable") ? [c] : c.querySelectorAll(".navbar-scrollable");
+      i.length && i.forEach(function (i) {
+        var t = o(i),
+          e = t.find(".nav", c),
+          l = e.find("li", c),
+          n = t.width(),
+          a = e.width(),
+          r = o(".region--content");
+        function s() {
+          900 <= o(window).width() ? n < a ? e.each(function () {
+            var i = o(this),
+              e = 0;
+            l.removeClass("visible-item"), i.find(".caret").remove(), l.parent().is("div") && l.unwrap();
+            for (var n = 0; n < l.length && (e += o(l[n]).width(), !(t.width() - 50 <= e)); ++n) o(l[n]).addClass("visible-item");
+            i.find("li.visible-item").wrapAll('<div class="visible-list"></div>'), i.find("li:not(.visible-item)").wrapAll('<div class="hidden-list card" />'), i.append('<span class="caret"></span>');
+            var a = i.find(".hidden-list"),
+              s = i.find(".caret");
+            s.on("click", function () {
+              a.is(":hidden") ? (r.addClass("js--z-index"), a.slideDown("300")) : a.slideUp("300", function () {
+                r.removeClass("js--z-index");
+              }), o(this).toggleClass("active");
+            }), o(document).on("click", function (i) {
+              i.stopPropagation(), o(i.target).closest(".navbar-secondary").length || (a.slideUp(300, function () {
+                r.removeClass("js--z-index");
+              }), s.removeClass("active"));
+            });
+          }) : e.css("display", "flex") : e.each(function () {
+            var i = o(this);
+            l.removeClass("visible-item"), i.find(".caret").remove(), l.parent().is("div") && l.unwrap();
+          });
+        }
+        s();
+        var d = v(function () {
+          s();
+        }, 250);
+        window.addEventListener("resize", d);
+      });
+    }
+  };
+}(jQuery, (once, Drupal.debounce));
\ No newline at end of file

components/03-molecules/navigation/navbar/navbar-secondary.js

@@ -6,25 +6,25 @@
    */
   Drupal.behaviors.navbarSecondaryScrollable = {
     attach: function (context) {
-      const navbarSecondary = (context.classList && context.classList.contains('block--banner-auto-generated')) ? [context] : context.querySelectorAll('.navbar-secondary .navbar-scrollable');
+      var navbarSecondary = (context.classList && context.classList.contains('navbar-scrollable')) ? [context] : context.querySelectorAll('.navbar-scrollable');
       if (!navbarSecondary.length) { return; }
-        // Sometimes after reload page, we can not find elements on the
+      // Sometimes after reload page, we can not find elements on the
         // secondary navigation. Promise function fixed it.
       navbarSecondary.forEach(function (navScrollElem) {
-        const navScroll = $(navScrollElem);
-        const navSecondary = navScroll.find('.nav', context);
-        const items = navSecondary.find('li', context);
-        const navScrollWidth = navScroll.width();
-        const navSecondaryWidth = navSecondary.width();
-        const regionContent = $('.region--content');
+        var navScroll = $(navScrollElem);
+        var navSecondary = navScroll.find('.nav', context);
+        var items = navSecondary.find('li', context);
+        var navScrollWidth = navScroll.width();
+        var navSecondaryWidth = navSecondary.width();
+        var regionContent = $('.region--content');
 
         // Secondary navigation behaviour,
         function secondaryNavBehaviour() {
           if($(window).width() >= 900) {
             if (navSecondaryWidth > navScrollWidth) {
               navSecondary.each(function () {
-                const $this = $(this);
-                let total = 0;
+                var $this = $(this);
+                var total = 0;
 
                 // Add `visible-item` class to the list items which displayed in the current secondary
                 // navigation width
@@ -35,7 +35,7 @@
                   items.unwrap();
                 }
 
-                for(let i = 0; i < items.length; ++i) {
+                for(var i = 0; i < items.length; ++i) {
                   total += $(items[i]).width();
 
                   if((navScroll.width() - 50) <= total) {
@@ -56,8 +56,8 @@
                 // Add caret.
                 $this.append('<span class="caret"></span>');
 
-                const hiddenList = $this.find('.hidden-list');
-                const cart = $this.find('.caret');
+                var hiddenList = $this.find('.hidden-list');
+                var cart = $this.find('.caret');
 
                 cart.on('click', function () {
                   if (hiddenList.is(":hidden")) {
@@ -88,7 +88,7 @@
           }
           else {
             navSecondary.each(function () {
-              const $this = $(this);
+              var $this = $(this);
 
               // Unwrap list items.
               // Remove extra classes/elements.
@@ -103,7 +103,7 @@
         }
         secondaryNavBehaviour();
 
-        const returnedFunction = debounce(function() {
+        var returnedFunction = debounce(function() {
           secondaryNavBehaviour();
         }, 250);