Préparation toggle classe pour menu mobile

public/css/general.css

@@ -1,4 +1,55 @@
+/* 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;
+}
+
+.wrapper {
+    max-width: 375px;
+    width: calc(100% - var(5px));
+    margin: 0 auto;
+}
+
+@media screen and (min-width: 768px) {
+    .wrapper{
+    max-width: 768px;
+    width: calc(100% - var(15px));
+
+    }
+}
+
+@media screen and (min-width: 1140px) {
+    .wrapper{
+max-width: 1140px;
+width: calc(100% - var(30px));
+}
+}
+
+/*Utilisation du css Layout Grid pour faire le wrapper*/
+.grid-wrapper {
+    display: grid;
+    grid-template-columns: auto minmax(375px, 1440px) auto;
+    grid-column-gap: 30px;
+}
+
+.grid-center {
+    grid-column: 2/3;
+}
 
 .heading1 {
     font-family: "Poppins";

public/css/header.css

@@ -1,5 +1,17 @@
 .header {
+    position: fixed;
+    z-index: 20;
     width: 100%;
+    top: 0;
+    background-color: #fff;
+    }
+
+    .headerWrapper{
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px;
     }
 
     a{
@@ -19,6 +31,7 @@ text-decoration: none;
     list-style: none;
     font-style: none;
     display: none;
+    width: 100%;
     }
 
     .headerMenuElement{
@@ -47,7 +60,7 @@ text-decoration: none;
     }
   
 
-  @media screen and (min-width: 576px) {
+  @media screen and (min-width: 778px) {
      .headerMenu{
         display: none; 
     }
@@ -57,7 +70,7 @@ text-decoration: none;
   }
 
       /* Les éléments du header s'affichent pour le breakpoint ordinateur */
-  @media screen and (min-width: 1024px) {
+  @media screen and (min-width: 1140px) {
     .headerMenu{
         display: flex;
         flex-flow: row;

public/icones/hamburger-menu.svg

@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M32 96v64h448V96H32zm0 128v64h448v-64H32zm0 128v64h448v-64H32z" fill="#fff" fill-opacity="1"></path></g></svg>
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1405_1060)">
+<path d="M3.125 9.375V15.625H46.875V9.375H3.125ZM3.125 21.875V28.125H46.875V21.875H3.125ZM3.125 34.375V40.625H46.875V34.375H3.125Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1405_1060">
+<rect width="50" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

templates/html/header.gohtml

@@ -1,13 +1,16 @@
 {{ define "header-html" }}
     <link rel="stylesheet" href="/public/css/header.css">
 <div class="header">   
-        <a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a>
+<div class="wrapper headerWrapper">
+        <a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
     <ul class="headerMenu">
         <li class="headerMenuElement"><a href="/">AGECEM</a></li>
         <li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
         <li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
         <li class="headerMenuElement"><a href="/admin">admin</a></li>
-    </ul>
+      </ul>
+    <a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a>
+    </div>
 </div>