Responsive menu

assets/js/theme/index.js

@@ -2,4 +2,5 @@ import './body.js';
 import './blocks/keyFigures';
 import './blocks/timeline';
 import './nav/stickyNav';
+import './nav/responsive';
 

assets/js/theme/nav/responsive.js

+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')
+                    }
+                })
+            })
+        }
+    })
+});
+
+
+
+

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

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

assets/sass/_theme/design-system/nav.sass

 .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