diff --git a/assets/js/theme/nav/mainMenu.js b/assets/js/theme/nav/mainMenu.js
index 72aa6aed91540c33fb8534c308eee5a1c4a2f731..d6857e3a2d6051702503dc144d59fb5bb423907a 100644
--- a/assets/js/theme/nav/mainMenu.js
+++ b/assets/js/theme/nav/mainMenu.js
@@ -1,13 +1,24 @@
import breakpoints from '../utils/breakpoints';
+const CLASSES = {
+ mainMenuOpened: 'is-opened',
+ bodyOverlay: 'has-overlay',
+ scrollingDown: 'is-scrolling-down',
+ menusOpened: 'is-menu-opened',
+ sticky: 'is-sticky'
+};
class MainMenu {
- constructor () {
- this.element = document.querySelector('nav[role="navigation"]');
+ constructor (selector) {
+ this.element = document.querySelector(selector);
this.menu = this.element.querySelector('.menu');
this.mainButton = this.element.querySelector('button');
this.dropdownsButtons = this.element.querySelectorAll('.has-children a[role="button"]');
- this.isOpened = false;
- this.isActive = false;
+
+ this.state = {
+ isOpened: false,
+ isActive: false,
+ previousScrollY: window.scrollY
+ };
this.listen();
}
@@ -21,23 +32,47 @@ class MainMenu {
this.toggleDropdown(button);
});
});
+ ['scroll', 'touchmove'].forEach(event => {
+ window.addEventListener(event, this.onScroll.bind(this));
+ });
}
resize () {
- this.isActive = window.innerWidth <= breakpoints.md;
+ this.state.isActive = window.innerWidth <= breakpoints.md;
}
toggleMain () {
- this.isOpened = !this.isOpened;
- this.mainButton.setAttribute('aria-expanded', this.isOpened ? 'true' : 'false');
- this.menu.classList.toggle('show');
- document.body.classList.toggle('has-overlay');
+ this.isOpened = !this.state.isOpened;
+ this.mainButton.setAttribute('aria-expanded', this.state.isOpened);
+ this.menu.classList.toggle(CLASSES.mainMenuOpened);
+ document.body.classList.toggle(CLASSES.bodyOverlay);
}
toggleDropdown (button) {
- const expanded = button.getAttribute('aria-expanded') === 'true';
- button.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+ const isExpanded = button.getAttribute('aria-expanded') === 'true';
+ button.setAttribute('aria-expanded', !isExpanded);
+ }
+
+ onScroll () {
+ const offset = this.element.offsetHeight,
+ y = window.scrollY;
+
+ console.log(y > offset);
+
+ if (y > offset) {
+ this.element.classList.add(CLASSES.sticky);
+ } else {
+ this.element.classList.remove(CLASSES.sticky);
+ }
+
+ if (y > this.state.previousScrollY && y > offset) {
+ document.documentElement.classList.add(CLASSES.scrollingDown);
+ } else {
+ document.documentElement.classList.remove(CLASSES.scrollingDown);
+ }
+
+ this.state.previousScrollY = y;
}
}
-export default new MainMenu();
+export default new MainMenu('header[role="banner"]');
diff --git a/assets/js/theme/nav/responsive.js b/assets/js/theme/nav/responsive.js
index aca9dad135886028b177be88c9191fca3bf94675..6e287c1a56fad0013221ac4979ebed32d196b8cf 100644
--- a/assets/js/theme/nav/responsive.js
+++ b/assets/js/theme/nav/responsive.js
@@ -1,7 +1,7 @@
const events = ['load', 'resize'];
let navBtn = document.querySelector('nav[role="navigation"] button'),
menuHeader = document.querySelector('.menu'),
- bodyOverlay = document.querySelector('body'),
+ bodyOverlay = document.querySelector('body'), // document.body
dropdownBtns = document.querySelectorAll('.has-children a[role="button"]'),
breckpointMd = 768,
classMobile = 'show';
diff --git a/assets/js/theme/nav/stickyNav.js b/assets/js/theme/nav/stickyNav.js
index 0598fc822651332964625a3487584ae8cb40c033..4f533aa4451f41f69406000613b72d0ef001d6fd 100644
--- a/assets/js/theme/nav/stickyNav.js
+++ b/assets/js/theme/nav/stickyNav.js
@@ -1,51 +1,51 @@
-const events = ['scroll', 'touchmove'];
-let previousY = 0,
- y = 0,
- classSticky = 'is-sticky',
- classScrollingDown = 'is-scrolling-down',
- classMenuOpen = 'is-menu-open',
- header = document.querySelector('header[role="banner"]'),
- offset = header.offsetHeight,
- dropdowns = header.querySelectorAll('[data-bs-toggle="dropdown"]'),
- menu = header.querySelector('.menu');
+// const events = ['scroll', 'touchmove'];
+// let previousY = 0,
+// y = 0,
+// classSticky = 'is-sticky',
+// classScrollingDown = 'is-scrolling-down',
+// classMenuOpen = 'is-menu-open',
+// header = document.querySelector('header[role="banner"]'),
+// offset = header.offsetHeight,
+// dropdowns = header.querySelectorAll('[data-bs-toggle="dropdown"]'),
+// menu = header.querySelector('.menu');
-dropdowns.forEach((dropdown) => {
- dropdown.addEventListener('hidden.bs.dropdown', () => {
- if (!header.querySelector('[aria-expanded="true"]')) {
- document.documentElement.classList.remove(classMenuOpen);
- }
- });
- dropdown.addEventListener('show.bs.dropdown', () => {
- document.documentElement.classList.add(classMenuOpen);
- });
-});
+// // dropdowns.forEach((dropdown) => {
+// // dropdown.addEventListener('hidden.bs.dropdown', () => {
+// // if (!header.querySelector('[aria-expanded="true"]')) {
+// // document.documentElement.classList.remove(classMenuOpen);
+// // }
+// // });
+// // dropdown.addEventListener('show.bs.dropdown', () => {
+// // document.documentElement.classList.add(classMenuOpen);
+// // });
+// // });
-menu.addEventListener('show.bs.collapse', () => {
- document.documentElement.classList.add(classMenuOpen);
-});
+// // menu.addEventListener('show.bs.collapse', () => {
+// // document.documentElement.classList.add(classMenuOpen);
+// // });
-menu.addEventListener('hide.bs.collapse', () => {
- document.documentElement.classList.remove(classMenuOpen);
-});
+// // menu.addEventListener('hide.bs.collapse', () => {
+// // document.documentElement.classList.remove(classMenuOpen);
+// // });
-events.forEach((event) => {
- window.addEventListener(event, () => {
- y = window.scrollY;
+// events.forEach((event) => {
+// window.addEventListener(event, () => {
+// y = window.scrollY;
- if (y > offset) {
- header.classList.add(classSticky);
- } else {
- header.classList.remove(classSticky);
- }
+// if (y > offset) {
+// header.classList.add(classSticky);
+// } else {
+// header.classList.remove(classSticky);
+// }
- if (y > previousY && y > offset) {
- document.documentElement.classList.add(classScrollingDown);
- // document.documentElement.style.setProperty(scrollMarginTop, '100px');
- } else {
- document.documentElement.classList.remove(classScrollingDown);
- // document.documentElement.style.setProperty(scrollMarginTop, '200px');
- }
+// if (y > previousY && y > offset) {
+// document.documentElement.classList.add(classScrollingDown);
+// // document.documentElement.style.setProperty(scrollMarginTop, '100px');
+// } else {
+// document.documentElement.classList.remove(classScrollingDown);
+// // document.documentElement.style.setProperty(scrollMarginTop, '200px');
+// }
- previousY = y;
- });
-});
+// previousY = y;
+// });
+// });
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 732ddfce7ee4b70a0557d2602efddec1ffde0aa8..12b503085d043ef0b625e6390e547ad76d106a61 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -65,6 +65,7 @@ $grid-gutter-sm: 20px
$zindex-nav-accessibility: 1010 !default
$zindex-stretched-link: 2 !default
$zindex-header: 10 !default
+$zindex-body-overlay: 9 !default
// Header
$header-color: $main-color !default
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index ca911e77fec38d12c852a6791a317f5135413787..28877a4d68c1939e3fbec0f73f98861618b38b1b 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -19,6 +19,7 @@ body
display: block
inset: 82px 0 0 0
position: fixed
+ z-index: $zindex-body-overlay
main
// Create padding-top for fixed header under md
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index beb9e644d1991d147a3461597d62816cd13bfa10..6d38a5628887ab1d3ffd31bc0ae8e33ceee78794 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -69,35 +69,36 @@
span
font-size: px2rem(14)
- &.show
- flex-grow: 1
- display: block
- a
- text-decoration: none
- .nav-level-1
- li
- a
- padding: 1rem 0
- > li:not(:last-child)
- border-bottom: 1px solid #adb5bd
- li.has-children
- a[role="button"]
- align-items: center
- display: flex
- justify-content: space-between
- @include icon("caret-bottom", after)
- &::after
- font-size: .375rem
- line-height: 1
- .dropdown-menu
- display: none
- padding-top: 0
-
- a[aria-expanded=true]
- @include icon("caret-top", after)
+ @include media-breakpoint-down(md)
+ &.is-opened
+ flex-grow: 1
+ display: block
+ a
+ text-decoration: none
+ .nav-level-1
+ li
+ a
+ padding: 1rem 0
+ > li:not(:last-child)
+ border-bottom: 1px solid #adb5bd
+ li.has-children
+ a[role="button"]
+ align-items: center
+ display: flex
+ justify-content: space-between
+ @include icon("caret-bottom", after)
+ &::after
+ font-size: .375rem
+ line-height: 1
+ .dropdown-menu
+ display: none
+ padding-top: 0
+
+ a[aria-expanded=true]
+ @include icon("caret-top", after)
- + .dropdown-menu
- display: block
+ + .dropdown-menu
+ display: block
.share
display: flex