diff --git a/public/css/general.css b/public/css/general.css
index 23ea8f6..6bf1412 100644
--- a/public/css/general.css
+++ b/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";
diff --git a/public/css/header.css b/public/css/header.css
index 809e914..5192eed 100644
--- a/public/css/header.css
+++ b/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;
diff --git a/public/icones/agecem-logo.svg b/public/icones/agecem-logo.svg
new file mode 100644
index 0000000..f6bc9ee
--- /dev/null
+++ b/public/icones/agecem-logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/icones/hamburger-menu.svg b/public/icones/hamburger-menu.svg
index 795a610..2fc43ca 100644
--- a/public/icones/hamburger-menu.svg
+++ b/public/icones/hamburger-menu.svg
@@ -1 +1,10 @@
-
\ No newline at end of file
+
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
diff --git a/templates/html/header.gohtml b/templates/html/header.gohtml
index 9079cc2..995884c 100644
--- a/templates/html/header.gohtml
+++ b/templates/html/header.gohtml
@@ -1,13 +1,16 @@
{{ define "header-html" }}
+
