Issue #3318504 by agami4: Improve secondary navigation behaviour

assets/css/layout--sky.css

@@ -2,7 +2,7 @@
   z-index: 10;
 }
 
-.socialblue--sky .layout--with-complementary.sidebar-left > .region--content {
+.socialblue--sky .layout--with-complementary.sidebar-left > .region--content.js--z-index {
   z-index: 1;
 }
 

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

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

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

@@ -32,6 +32,7 @@
         var items = navSecondary.find('li', context);
         var navScrollWidth = navScroll.width();
         var navSecondaryWidth = navSecondary.width();
+        var regionContent = $('.region--content');
 
           // Secondary navigation behaviour,
           function secondaryNavBehaviour() {
@@ -76,7 +77,15 @@
                   var cart = $this.find('.caret');
 
                   cart.on('click', function () {
-                    hiddenList.slideToggle(300);
+                    if (hiddenList.is(":hidden")) {
+                      regionContent.addClass('js--z-index');
+                      hiddenList.slideDown('300');
+                    } else {
+                      hiddenList.slideUp('300', function() {
+                        regionContent.removeClass('js--z-index');
+                      });
+                    }
+
                     $(this).toggleClass('active');
                   });
 
@@ -84,7 +93,9 @@
                     event.stopPropagation();
 
                     if ($(event.target).closest('.navbar-secondary').length) return;
-                    hiddenList.slideUp(300);
+                    hiddenList.slideUp(300, function() {
+                      regionContent.removeClass('js--z-index');
+                    });
                     cart.removeClass('active');
                   });
                 });

components/05-templates/layout/layout--sky.scss

@@ -21,7 +21,9 @@
     }
 
     > .region--content {
-      z-index: 1;
+      &.js--z-index {
+        z-index: 1;
+      }
 
       @include for-desktop-up {
         padding-left: 1rem;