diff --git a/assets/css/layout--sky.css b/assets/css/layout--sky.css index 7df56821acc1c6d2d56fb0e9b2e3d9490751d834..6c6daa9934386515771ab2c7e9581d590a6c9e47 100644 --- a/assets/css/layout--sky.css +++ b/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; } diff --git a/assets/js/navbar-secondary--sky.min.js b/assets/js/navbar-secondary--sky.min.js index 30c4002721c82cd1b815de67d8301fa46b6c8b43..d97777b6bce7e4187937b929cea6e4db8627d3dc 100644 --- a/assets/js/navbar-secondary--sky.min.js +++ b/assets/js/navbar-secondary--sky.min.js @@ -1 +1 @@ -!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 diff --git a/components/03-molecules/navigation/navbar/navbar-secondary--sky.js b/components/03-molecules/navigation/navbar/navbar-secondary--sky.js index cd2160b1792cfa9979575c749d160a9c7939bd0d..050b55877126d033252e0914219cc7d072bf2653 100644 --- a/components/03-molecules/navigation/navbar/navbar-secondary--sky.js +++ b/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'); }); }); diff --git a/components/05-templates/layout/layout--sky.scss b/components/05-templates/layout/layout--sky.scss index 1b5b0b1bc608aba909773c85c48fd986c4902b98..d85b9969758cfb8d3b921ce51dd885cbee7b41c8 100644 --- a/components/05-templates/layout/layout--sky.scss +++ b/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;