From 2750b3d78ac14f3b1e808f0f5c6a7caeaef8f13c Mon Sep 17 00:00:00 2001
From: "serhii.myronets" <serhii.myronets@lembergsolutions.com>
Date: Tue, 1 Nov 2022 14:47:02 +0200
Subject: [PATCH] Issue #3318504 by agami4: Improve secondary navigation
behaviour
---
assets/css/layout--sky.css | 2 +-
assets/js/navbar-secondary--sky.min.js | 2 +-
.../navigation/navbar/navbar-secondary--sky.js | 15 +++++++++++++--
components/05-templates/layout/layout--sky.scss | 4 +++-
4 files changed, 18 insertions(+), 5 deletions(-)
diff --git a/assets/css/layout--sky.css b/assets/css/layout--sky.css
index 7df56821..6c6daa99 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 30c40027..d97777b6 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 cd2160b1..050b5587 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 1b5b0b1b..d85b9969 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;
--
GitLab