Préparation toggle classe pour menu mobile

This commit is contained in:
Alexel 2023-08-14 16:27:46 -04:00
parent c98a587f59
commit 1fed4e9a8e
4 changed files with 44 additions and 0 deletions

View file

@ -1,3 +1,20 @@
/* La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec le modèle de boîte CSS).
// Références: https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
img {
max-width: 100%;
}
body{ body{
margin: 0; margin: 0;
} }

View file

@ -1,5 +1,9 @@
.header { .header {
position: fixed;
z-index: 20;
width: 100%; width: 100%;
top: 0;
background-color: #fff;
} }
.headerWrapper{ .headerWrapper{

0
public/js/header.js Normal file
View file

View file

@ -0,0 +1,23 @@
/** Création et exportation de la classe Header */
export default class Header {
constructor(element) {
this.element = element;
this.html = document.documentElement;
this.init();
}
/**
* Méthode d'initialisation
*/
init() {
const toggle = this.element.querySelector('.js-toggle');
toggle.addEventListener('click', this.onToggleNav.bind(this));
}
onToggleNav() {
// Enlever la classe .is-scrolling-down pour éviter les bugs si l'on fait défiler la page jsute après l'ouverture du menu
this.html.classList.toggle('nav-is-active');
}
}