From 70d65caf476f124de80c05a062f9ce0b79386ede Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Wed, 27 Jul 2022 16:54:52 +0200
Subject: [PATCH] Responsive menu
---
assets/js/theme/index.js | 1 +
assets/js/theme/nav/responsive.js | 42 +++++++++++++++++
assets/sass/_theme/design-system/a11y.sass | 2 +-
assets/sass/_theme/design-system/header.sass | 8 ++++
assets/sass/_theme/design-system/nav.sass | 49 ++++++++++++++++++--
5 files changed, 98 insertions(+), 4 deletions(-)
create mode 100644 assets/js/theme/nav/responsive.js
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 74d3e442..fb5786f5 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -2,4 +2,5 @@ import './body.js';
import './blocks/keyFigures';
import './blocks/timeline';
import './nav/stickyNav';
+import './nav/responsive';
diff --git a/assets/js/theme/nav/responsive.js b/assets/js/theme/nav/responsive.js
new file mode 100644
index 00000000..0c1ca399
--- /dev/null
+++ b/assets/js/theme/nav/responsive.js
@@ -0,0 +1,42 @@
+const events = ['load', 'resize'];
+let header = document.querySelector('header[role="banner"]'),
+ navBtn = document.querySelector('nav[role="navigation"] button'),
+ menuHeader = document.querySelector('.menu'),
+ dropdownBtns = document.querySelectorAll('.has-children a[role="button"]'),
+ breckpointMd = 768,
+ classMobile = 'show';
+
+events.forEach((event) => {
+ window.addEventListener(event, () => {
+ windowWidth = window.innerWidth;
+
+ if (windowWidth <= breckpointMd) {
+ navBtn.addEventListener("click", function(){
+ if(menuHeader.className.includes(classMobile)) {
+ navBtn.setAttribute('aria-expanded', 'false')
+ }
+ else {
+ navBtn.setAttribute('aria-expanded', 'true')
+ }
+ menuHeader.classList.toggle(classMobile)
+ });
+
+ dropdownBtns.forEach((dropdownBtn) => {
+ dropdownBtn.addEventListener("click", function(){
+ this.href = "javascript:void(0)"
+
+ if(this.getAttribute('aria-expanded') == "true") {
+ this.setAttribute('aria-expanded', 'false')
+ }
+ else {
+ this.setAttribute('aria-expanded', 'true')
+ }
+ })
+ })
+ }
+ })
+});
+
+
+
+
diff --git a/assets/sass/_theme/design-system/a11y.sass b/assets/sass/_theme/design-system/a11y.sass
index 24b7c0d3..0ce65765 100644
--- a/assets/sass/_theme/design-system/a11y.sass
+++ b/assets/sass/_theme/design-system/a11y.sass
@@ -2,7 +2,7 @@
@include list-reset
padding: $spacing1
position: absolute
- transform: translateY(-100%)
+ transform: translateY(calc(-100% - 24px))
z-index: $zindex-nav-accessibility
li
display: inline-block
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index e44d1c93..21118dee 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -16,12 +16,17 @@ header[role="banner"]
.container
align-items: center
display: flex
+ flex-wrap: wrap
justify-content: space-between
button[type="button"]
+ @include button-reset
display: none
border: 0
color: $body-color
position: relative
+ @include media-breakpoint-down(md)
+ display: flex
+ align-items: center
&:focus
box-shadow: none
&:focus-visible
@@ -33,6 +38,7 @@ header[role="banner"]
font-size: px2rem(14)
text-transform: uppercase
span:last-of-type
+ @include icon("burger", before)
background: none
height: calc(1.063rem + .3125rem * 2)
padding: px2rem(5) 0 px2rem(5) px2rem(5)
@@ -49,3 +55,5 @@ header[role="banner"]
img
height: 20px
width: auto
+
+
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 896077d2..d12d0857 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -1,4 +1,12 @@
.menu
+ @include media-breakpoint-down(md)
+ -webkit-flex-basis: 100vw
+ display: none
+ flex-basis: 100vw
+ margin-top: 1.875rem
+ max-height: 70vh
+ overflow: auto
+
a,
a:hover,
a:focus,
@@ -23,11 +31,14 @@
background: $header-background-color
padding-bottom: $spacing1
padding-top: $spacing1
- inset: 100% 0 auto 0
- position: absolute
+ @include media-breakpoint-up(md)
+ inset: 100% 0 auto 0
+ position: absolute
.nav-level-1
display: flex
+ @include media-breakpoint-down(md)
+ @include grid(1)
> li
> a
padding: $spacing1
@@ -39,9 +50,10 @@
display: block
.nav-level-2
+ @include grid(1)
@include media-breakpoint-up(md)
@include container
- @include grid(4, md)
+ @include grid(4, md)
> li
&,
& > a,
@@ -56,6 +68,37 @@
span
font-size: px2rem(14)
+ &.show
+ flex-grow: 1
+ display: block
+ a
+ text-decoration: none
+ .nav-level-1
+ > li:not(:last-child)
+ border-bottom: 1px solid #adb5bd
+ li.has-children
+ a[role="button"]
+ align-items: center
+ display: flex
+ justify-content: space-between
+ padding: 1rem 0
+ @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)
+ &:hover,
+ &:focus,
+ &:active
+ color: $header-color
+
+ + .dropdown-menu
+ display: block
.share
display: flex
--
GitLab