public/css/general.css

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

@@ -2,6 +2,14 @@
     width: 100%;
     }
 
+    .headerWrapper{
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px;
+    }
+
     a{
 color: #000;
 text-decoration: none;
@@ -19,6 +27,7 @@ text-decoration: none;
     list-style: none;
     font-style: none;
     display: none;
+    width: 100%;
     }
 
     .headerMenuElement{
@@ -47,7 +56,7 @@ text-decoration: none;
     }
   
 
-  @media screen and (min-width: 576px) {
+  @media screen and (min-width: 778px) {
      .headerMenu{
         display: none; 
     }
@@ -57,7 +66,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>

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>
+    <a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a>
+    </div>
 </div>