public/css/general.css

@@ -1,22 +1,4 @@
-.header {
-    width: 100%;
-    }
 
-.headerMenu {
-    font-family: "Poppins";
-    font-weight: 400; /*regular*/ 
-    font-size: 1.25rem; /*20px*/
-    color: #000;  /*Noir pur*/
-    display: flex;
-    flex-flow: row;
-    justify-content: space-around;
-    align-items: center;
-    }
-
-.headerMenuElement:hover {
-    border-bottom: 5px #FF563C solid; /*Orange Highlight*/
-    cursor: pointer;
-    }
 
 .heading1 {
     font-family: "Poppins";

public/css/header.css

@@ -0,0 +1,49 @@
+.header {
+    width: 100%;
+    }
+
+.headerMenu {
+    font-family: "Poppins";
+    font-weight: 400; /*regular*/ 
+    font-size: 1.25rem; /*20px*/
+    color: #394596;  /*Noir pur*/
+    display: flex;
+    flex-flow: row;
+    justify-content: space-around;
+    align-items: center;
+    }
+
+.headerMenuElement:hover {
+    border-bottom: 5px #FF563C solid; /*Orange Highlight*/
+    cursor: pointer;
+    }
+
+    /* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
+@media screen and (max-width: 576px) {
+    .headerMenuElement{
+        display: none;
+    }
+    .hamburgerMenuIcon{
+        display: block;
+    }
+  }
+
+  @media screen and (min-width: 576px) {
+     .headerMenuElement{
+        display: none; 
+    }
+    .hamburgerMenuIcon{
+        display: block;
+    }
+  }
+
+      /* Les éléments du header s'affichent pour le breakpoint ordinateur */
+  @media screen and (min-width: 1024px) {
+    .headerMenuElement{
+        display: block;      
+    }
+    .hamburgerMenuIcon{
+        display: none;
+    }
+  }
+

public/icones/hamburger-menu.svg

@@ -0,0 +1 @@
+<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>

templates/html/header.gohtml

@@ -2,6 +2,7 @@
 
 <div class="header">   
     <ul class="headerMenu">
+        <li class="headerMenuElement"><a href="/"><svg class="headerMenuIcon" src="/public/icones/hamburger-menu.svg"></svg></a></li>
         <li class="headerMenuElement"><a href="/">index</a></li>
         <li class="headerMenuElement"><a href="/a-propos">À propos</a></li>
         <li class="headerMenuElement"><a href="/actualite">Actualité</a></li>