Issue #3211612 by agami4: Improve secondary navigation behaviour

assets/css/navbar--sky.css

@@ -6,7 +6,8 @@
 .socialblue--sky .navbar-secondary {
   width: 100%;
   min-height: 44px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .socialblue--sky .navbar-secondary .navbar-scrollable {
@@ -31,31 +32,38 @@
   border-bottom-color: #fff;
 }
 
+.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav {
+  display: table;
+  width: 100%;
+  text-align: center;
+}
+
+.socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav li, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav li {
+  position: relative;
+  display: table-cell;
+}
+
 @media (min-width: 900px) {
   .socialblue--sky .navbar-fixed-top .navbar-nav {
     padding-right: 1.625rem;
   }
   .socialblue--sky.mode-search .navbar__open-search-block {
-    transform: scale(100);
+    -webkit-transform: scale(100);
+            transform: scale(100);
   }
   .socialblue--sky .navbar-secondary .navbar-scrollable {
     border-radius: 0 5px 0 0;
-    overflow: visible;
+    overflow: hidden;
   }
   .socialblue--sky.path-user .layout--with-complementary .navbar-secondary, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary {
-    flex: 0 0 66.66667%;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 66.66667%;
+            flex: 0 0 66.66667%;
     max-width: 66.66667%;
     border-radius: 5px 5px 0 0;
-    order: 1;
-  }
-  .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav {
-    width: 100%;
-    display: table;
-    text-align: center;
-  }
-  .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav li, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav li {
-    display: table-cell;
-    position: relative;
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
   }
   .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .caret, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .caret {
     position: absolute;
@@ -63,17 +71,25 @@
     right: 15px;
     border-width: 6px 6px 0;
     border-top-color: #fff;
-    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
     cursor: pointer;
   }
   .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .caret.active, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .caret.active {
-    transform: translateY(-50%) rotate(180deg);
+    -webkit-transform: translateY(-50%) rotate(180deg);
+            transform: translateY(-50%) rotate(180deg);
   }
   .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .visible-list, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .visible-list {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     height: 44px;
-    align-items: center;
-    justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     padding: 0 25px;
   }
   .socialblue--sky.path-user .layout--with-complementary .navbar-secondary .navbar-nav .visible-list a, .socialblue--sky.path-group .layout--with-complementary .navbar-secondary .navbar-nav .visible-list a {

assets/js/navbar-secondary--sky.min.js

-!function(t){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i,a){t(window).on("load",function(){if(t(".layout--with-complementary")){var i=t(".navbar-secondary .navbar-scrollable"),a=i.find(".nav"),l=a.find("li");if(900<=t(window).width())if(a.width()>i.width()){for(var n=0,e=0;e<l.length&&(n+=t(l[e]).width(),!(i.width()-50<=n));++e)t(l[e]).addClass("visible-item");a.each(function(){var i=t(this);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"),l=i.find(".caret");l.on("click",function(){a.slideToggle(300),t(this).toggleClass("active")}),t(document).on("click",function(i){t(i.target).closest(".navbar-secondary").length||(a.slideUp(300),l.removeClass("active"),i.stopPropagation())})})}else a.css("display","flex")}})}}}(jQuery);
\ No newline at end of file
+!function(f){Drupal.behaviors.navbarSecondaryScrollable={attach:function(i){var l=f(".navbar-secondary .navbar-scrollable",i),e=l.find(".nav",i),s=e.find("li",i),a=l.width(),n=e.width();function t(){f(".layout--with-complementary")&&(900<=f(window).width()?a<n&&(e.css("overflow","visible"),e.each(function(){var i=f(this),e=0;s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap();for(var a=0;a<s.length&&(e+=f(s[a]).width(),!(l.width()-50<=e));++a)f(s[a]).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 n=i.find(".hidden-list"),t=i.find(".caret");t.on("click",function(){n.slideToggle(300),f(this).toggleClass("active")}),f(document).on("click",function(i){i.stopPropagation(),f(i.target).closest(".navbar-secondary").length||(n.slideUp(300),t.removeClass("active"))})})):(e.css({"overflow-x":"scroll",display:"flex"}),e.each(function(){var i=f(this);s.removeClass("visible-item"),i.find(".caret").remove(),s.parent().is("div")&&s.unwrap()})))}f(window).on("load",function(){t()});var o,r,c,d,v=(o=function(){t()},r=250,function(){var i=this,e=arguments,a=c&&!d;clearTimeout(d),d=setTimeout(function(){d=null,c||o.apply(i,e)},r),a&&o.apply(i,e)});window.addEventListener("resize",v)}}}(jQuery);
\ No newline at end of file

components/03-molecules/navigation/navbar/navbar--sky.scss

@@ -33,7 +33,10 @@
 
       @include for-tablet-landscape-up {
         border-radius: 0 $border-radius-extrasmall 0 0;
-        overflow: visible;
+
+        // This style needs if secondary navigation have a lot of list items.
+        // This will remove after load page on the navbar-secondary--sky.js file.
+        overflow: hidden;
       }
     }
 
@@ -76,16 +79,18 @@
         }
 
         .navbar-nav {
+          display: table;
+          width: 100%;
+          text-align: center;
+
           @include for-tablet-landscape-up {
-            width: 100%;
-            display: table;
-            text-align: center;
           }
 
           li {
+            position: relative;
+            display: table-cell;
+
             @include for-tablet-landscape-up {
-              display: table-cell;
-              position: relative;
             }
           }
 

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

@@ -5,30 +5,60 @@
   * is too big.
    */
   Drupal.behaviors.navbarSecondaryScrollable = {
-    attach: function (context, settings) {
-
-      $(window).on('load', function () {
+    attach: function (context) {
+
+      // Debounce.
+      function debounce(func, wait, immediate) {
+        var timeout;
+        return function() {
+          var context = this, args = arguments;
+          var later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+          };
+          var callNow = immediate && !timeout;
+          clearTimeout(timeout);
+          timeout = setTimeout(later, wait);
+          if (callNow) func.apply(context, args);
+        };
+      };
+
+      var navScroll = $('.navbar-secondary .navbar-scrollable', context);
+      var navSecondary = navScroll.find('.nav', context);
+      var items = navSecondary.find('li', context);
+      var navScrollWidth = navScroll.width();
+      var navSecondaryWidth = navSecondary.width();
+
+      // Secondary navigation behaviour,
+      function secondaryNavBehaviour() {
         if($('.layout--with-complementary')) {
-          var navScroll = $('.navbar-secondary .navbar-scrollable');
-          var navSecondary = navScroll.find('.nav');
-          var items = navSecondary.find('li');
 
           if($(window).width() >= 900) {
-            if (navSecondary.width() > navScroll.width()) {
-              var total = 0;
+            if (navSecondaryWidth > navScrollWidth) {
+              navSecondary.css('overflow', 'visible');
+
+              navSecondary.each(function () {
+                var $this = $(this);
+                var total = 0;
 
-              for(var i = 0; i < items.length; ++i) {
-                total += $(items[i]).width();
+                // Add `visible-item` class to the list items which displayed in the current secondary
+                // navigation width
+                items.removeClass('visible-item');
+                $this.find('.caret').remove();
 
-                if((navScroll.width() -50) <= total) {
-                  break;
+                if(items.parent().is('div')) {
+                  items.unwrap();
                 }
 
-                $(items[i]).addClass('visible-item');
-              }
+                for(var i = 0; i < items.length; ++i) {
+                  total += $(items[i]).width();
 
-              navSecondary.each(function () {
-                var $this = $(this);
+                  if((navScroll.width() - 50) <= total) {
+                    break;
+                  }
+
+                  $(items[i]).addClass('visible-item');
+                }
 
                 // Create wrapper for visible items.
                 $this.find('li.visible-item')
@@ -50,19 +80,44 @@
                 });
 
                 $(document).on('click', function(event) {
+                  event.stopPropagation();
+
                   if ($(event.target).closest('.navbar-secondary').length) return;
                   hiddenList.slideUp(300);
                   cart.removeClass('active');
-                  event.stopPropagation();
                 });
               });
-            } else {
-              navSecondary.css('display', 'flex');
             }
           }
+          else {
+            navSecondary.css({'overflow-x': 'scroll', 'display': 'flex'});
+
+            navSecondary.each(function () {
+              var $this = $(this);
+
+              // Unwrap list items.
+              // Remove extra classes/elements.
+              items.removeClass('visible-item');
+              $this.find('.caret').remove();
+
+              if(items.parent().is('div')) {
+                items.unwrap();
+              }
+            });
+          }
         }
+      }
+
+      $(window).on('load', function () {
+        secondaryNavBehaviour();
       });
 
+      var returnedFunction = debounce(function() {
+        secondaryNavBehaviour();
+      }, 250);
+
+      window.addEventListener('resize', returnedFunction);
+
     }
 
   };