From 950131ee14c93eccb1dd1aedb99c1ae964e4503b Mon Sep 17 00:00:00 2001
From: Alexel <themanwhocoulddividebyzero@gmail.com>
Date: Tue, 8 Aug 2023 17:02:00 -0400
Subject: [PATCH] =?UTF-8?q?migration=20css=20=C3=A0=20header.css=20et=20me?=
 =?UTF-8?q?nu=20hamburger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/general.css           | 18 ------------
 public/css/header.css            | 49 ++++++++++++++++++++++++++++++++
 public/icones/hamburger-menu.svg |  1 +
 templates/html/header.gohtml     |  1 +
 4 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 public/css/header.css
 create mode 100644 public/icones/hamburger-menu.svg

diff --git a/public/css/general.css b/public/css/general.css
index 8474153..23ea8f6 100644
--- a/public/css/general.css
+++ b/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";
diff --git a/public/css/header.css b/public/css/header.css
new file mode 100644
index 0000000..b947751
--- /dev/null
+++ b/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;
+    }
+  }
+
diff --git a/public/icones/hamburger-menu.svg b/public/icones/hamburger-menu.svg
new file mode 100644
index 0000000..795a610
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/html/header.gohtml b/templates/html/header.gohtml
index 178ae4a..7473e88 100644
--- a/templates/html/header.gohtml
+++ b/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>