agecem/agecem-org
4
1
Fork 0
Code Issues 33 Pull requests 2 Activity

Ajouter responsiveness au header #93

Merged
vlbeaudoin merged 21 commits from feature/responsive-header into main 2023-08-16 13:43:50 -04:00
Conversation 0 Commits 21 Files changed 15 +30 -6
2 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 842af85788 - Show all commits

18
public/css/header.css
View file

@ -83,3 +83,21 @@ text-decoration: none;
}
}
.headerMenuMobile{
font-family: "Poppins";
font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/
color: #000; /*Noir pur*/
list-style: none;
font-style: none;
display: none;
}
.nav-is-active{
background-color: #fff;
display: flex;
flex-flow: column;
justify-content: space-between;
position: fixed;
top: 75px;
}

18
templates/html/header.gohtml
View file

@ -2,22 +2,28 @@
<link rel="stylesheet" href="/public/css/header.css">
<script>
function onToggleNav() {
var menu = document.querySelector(".headerMenu");
var menu = document.querySelector(".headerMenuMobile");
console.log(menu);
menu.classList.toggle('nav-is-active');
}
</script>
<div class="header">
<div class="wrapper headerWrapper">
<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="/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>
<img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
</div>
<ul class="headerMenuMobile">
<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>
<img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
</div>
</ul>
</div>