From a4568b7eabd8d2fa8d98c1d40d0554e1eb206e33 Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Wed, 27 Jul 2022 17:58:25 +0200
Subject: [PATCH] Added overlay
---
assets/js/theme/nav/responsive.js | 2 ++
assets/sass/_theme/design-system/layout.sass | 8 ++++++++
assets/sass/_theme/design-system/nav.sass | 4 +++-
3 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/assets/js/theme/nav/responsive.js b/assets/js/theme/nav/responsive.js
index 6cd03ca4..aca9dad1 100644
--- a/assets/js/theme/nav/responsive.js
+++ b/assets/js/theme/nav/responsive.js
@@ -1,6 +1,7 @@
const events = ['load', 'resize'];
let navBtn = document.querySelector('nav[role="navigation"] button'),
menuHeader = document.querySelector('.menu'),
+ bodyOverlay = document.querySelector('body'),
dropdownBtns = document.querySelectorAll('.has-children a[role="button"]'),
breckpointMd = 768,
classMobile = 'show';
@@ -18,6 +19,7 @@ events.forEach((event) => {
navBtn.setAttribute('aria-expanded', 'true')
}
menuHeader.classList.toggle(classMobile)
+ bodyOverlay.classList.toggle('has-overlay')
});
dropdownBtns.forEach((dropdownBtn) => {
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 960874a2..c1fc4e3e 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -12,6 +12,14 @@ body
&:not(.is-loaded)
*
transition-duration: 0s !important
+ &.has-overlay
+ &::after
+ animation-name: showIn
+ background-color: rgba(0,0,0,.3)
+ content: ""
+ display: block
+ inset: 82px 0 0 0
+ position: fixed
figure
margin: 0
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 18121848..beb9e644 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -75,6 +75,9 @@
a
text-decoration: none
.nav-level-1
+ li
+ a
+ padding: 1rem 0
> li:not(:last-child)
border-bottom: 1px solid #adb5bd
li.has-children
@@ -82,7 +85,6 @@
align-items: center
display: flex
justify-content: space-between
- padding: 1rem 0
@include icon("caret-bottom", after)
&::after
font-size: .375rem
--
GitLab