From 1fed4e9a8e5468d0884b18717c06337dafe9ba30 Mon Sep 17 00:00:00 2001 From: Alexel Date: Mon, 14 Aug 2023 16:27:46 -0400 Subject: [PATCH] =?UTF-8?q?Pr=C3=A9paration=20toggle=20classe=20pour=20men?= =?UTF-8?q?u=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/general.css | 17 +++++++++++++++++ public/css/header.css | 4 ++++ public/js/header.js | 0 public/js/index.js | 23 +++++++++++++++++++++++ 4 files changed, 44 insertions(+) create mode 100644 public/js/header.js diff --git a/public/css/general.css b/public/css/general.css index a2be4e5..6bf1412 100644 --- a/public/css/general.css +++ b/public/css/general.css @@ -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{ margin: 0; } diff --git a/public/css/header.css b/public/css/header.css index f5d6de1..5192eed 100644 --- a/public/css/header.css +++ b/public/css/header.css @@ -1,5 +1,9 @@ .header { + position: fixed; + z-index: 20; width: 100%; + top: 0; + background-color: #fff; } .headerWrapper{ diff --git a/public/js/header.js b/public/js/header.js new file mode 100644 index 0000000..e69de29 diff --git a/public/js/index.js b/public/js/index.js index e69de29..e228e99 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -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'); + } + + } \ No newline at end of file