website/layouts/partials/header.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) {
            document.body.style.overflow = "hidden";
        }
        if (!event.target.checked) {
            document.body.style.overflow = "initial";
        }
    })
</script>