agecem/agecem-org
4
1
Fork 0
Code Issues 31 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 +9 -2
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d4c11bec22 - Show all commits

2
public/js/index.js
View file

@ -1,5 +1,5 @@
/** Création et exportation de la classe Header */ /** Création et exportation de la classe Header */
export default class Header { class Header {
constructor(element) { constructor(element) {
this.element = element; this.element = element;
this.html = document.documentElement; this.html = document.documentElement;

9
templates/html/header.gohtml
View file

@ -1,5 +1,12 @@
{{ define "header-html" }} {{ define "header-html" }}
<link rel="stylesheet" href="/public/css/header.css"> <link rel="stylesheet" href="/public/css/header.css">
<script>
function onToggleNav() {
var menu = document.querySelector(".headerMenu");
console.log(menu);
menu.classList.toggle('nav-is-active');
}
</script>
<div class="header"> <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> <a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
@ -9,7 +16,7 @@
<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> <img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
</div> </div>
</div> </div>