website/layouts/partials/header.html
Matthieu Bessat 388c4ed11e
All checks were successful
Deploy workflow / deploy (push) Successful in 29s
fix(mobile): add workaround on chrome
2024-03-16 01:34:56 +01:00

62 lines
2.4 KiB
HTML

<header class="site-header">
<div class="site-header__content page-container">
<a class="site-header__title" href="/">
{{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent" "class" "site-header__logo") }}
</a>
<nav class="site-header__nav desktop-nav">
{{ with .File }}
<ul class="inline-menu-list">
<li><a href="/actualites">Actualités</a></li>
<li><a href="/association">L'association</a></li>
<li><a href="/documentation">Documentation</a></li>
<li>
<a
href="/adhesion"
class="button button-transparent membership-header-button"
>
Adhérer
</a>
</li>
</ul>
{{ end }}
</nav>
<div class="burger-menu">
<div class="burger-button-container">
<input type="checkbox" id="navi-toggle" class="checkbox" />
<label for="navi-toggle" class="burger-button">
<span class="icon">&nbsp;</span>
</label>
<div class="background">&nbsp;</div>
<nav class="nav">
<ul class="list">
<li><a href="/">Accueil</a></li>
<li><a href="/actualites">Actualités</a></li>
<li><a href="/association">L'association</a></li>
<li><a href="/documentation">Documentation</a></li>
<li><a href="/adhesion">Adhérer</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<script>
// workaround to limit the page scroll if the mobile nav is opened
const nav_button = document.getElementById("navi-toggle")
nav_button.addEventListener("change", event => {
if (event.target.checked) {
}
if (!event.target.checked) {
setTimeout(() => {
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
}, 800)
setTimeout(() => {
document.documentElement.style.overflow = "initial";
document.body.style.overflow = "initial";
}, 810)
}
})
</script>