Compare commits

...

2 commits

7 changed files with 113 additions and 5 deletions

View file

@ -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 { .heading1 {
font-family: "Poppins"; font-family: "Poppins";

View file

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 27 KiB

View file

@ -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>

Before

Width:  |  Height:  |  Size: 328 B

After

Width:  |  Height:  |  Size: 396 B

0
public/js/header.js Normal file
View file

View file

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

View file

@ -1,13 +1,16 @@
{{ define "header-html" }} {{ define "header-html" }}
<link rel="stylesheet" href="/public/css/header.css"> <link rel="stylesheet" href="/public/css/header.css">
<div class="header"> <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"> <ul class="headerMenu">
<li class="headerMenuElement"><a href="/">AGECEM</a></li> <li class="headerMenuElement"><a href="/">AGECEM</a></li>
<li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</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="/documentation">Documentation</a></li>
<li class="headerMenuElement"><a href="/admin">admin</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> </div>