refacto js menu

assets/js/theme/blocks/timeline.js

@@ -125,7 +125,6 @@ class BlockTimeline {
             this.next.disabled = this.index === this.items.length - 1;
         }
     }
-
 }
 
 timelines.forEach((timeline) => {

assets/js/theme/index.js

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

assets/js/theme/nav/mainMenu.js

+import breakpoints from '../utils/breakpoints';
+
+class MainMenu {
+    constructor () {
+        this.element = document.querySelector('nav[role="navigation"]');
+        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.listen();
+    }
+
+    listen () {
+        window.addEventListener('resize', this.resize.bind(this));
+        this.mainButton.addEventListener('click', this.toggleMain.bind(this));
+        this.dropdownsButtons.forEach((button) => {
+            button.addEventListener('click', (event) => {
+                event.preventDefault();
+                this.toggleDropdown(button);
+            });
+        });
+    }
+
+    resize () {
+        this.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');
+    }
+
+    toggleDropdown (button) {
+        const expanded = button.getAttribute('aria-expanded') === 'true';
+        button.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+    }
+}
+
+export default new MainMenu();

assets/js/theme/utils/breakpoints.js

+export default {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400
+};

assets/sass/_theme/_configuration.sass

@@ -64,6 +64,7 @@ $grid-gutter-sm: 20px
 // Z-index
 $zindex-nav-accessibility: 1010 !default
 $zindex-stretched-link: 2 !default
+$zindex-header: 10 !default
 
 // Header
 $header-color: $main-color !default
@@ -71,7 +72,7 @@ $header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à p
 $header-background-color: $main-background-color !default
 $header-sticky-enabled: true !default
 $header-sticky-transition: 0.3s !default
-$header-height: 74px !default
+$header-height: 61px !default
 $header-height-md: 74px !default
 
 // Footer

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

 header[role="banner"]
     background-color: $header-background-color
-    position: fixed
-    z-index: 10
+    z-index: $zindex-header
     @include media-breakpoint-up(md)
         @if $header-sticky-enabled
             position: sticky
@@ -14,6 +13,7 @@ header[role="banner"]
             &.is-sticky
                 position: sticky
     @include media-breakpoint-down(md)
+        position: fixed
         padding: 1rem 0
         width: 100%
 
@@ -60,5 +60,3 @@ header[role="banner"]
         img
             height: 20px
             width: auto
-
-    
\ No newline at end of file

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

@@ -20,6 +20,11 @@ body
             inset: 82px 0 0 0
             position: fixed
 
+main
+    // Create padding-top for fixed header under md
+    @include media-breakpoint-down(md)
+        padding-top: $header-height
+
 figure
     margin: 0
 img