blog/themes/chosto/layouts/partials/navbar.html

<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="{{ .Site.Home.Permalink }}">
      {{ $imageURL := "https://bulma.io/images/placeholders/64x64.png" }}
      {{ $image := resources.Get "img/logo.jpg" }}

      {{ with $image }}
      {{ $imageResized := $image.Resize "64x" }}
      {{ $imageURL = $imageResized.Permalink }}
      {{ end }}
      <img src="{{ $imageURL }}">
    </a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="navbar" class="navbar-menu">
    <!-- In case of another navbar-start right after -->
    <div class="navbar-start mr-0">
      <a class="navbar-item {{ if eq .Permalink .Site.Home.Permalink }}is-active is-tab{{ end }}" href="{{ .Site.Home.Permalink }}">Accueil</a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          Catégories
        </a>
        <div class="navbar-dropdown">
          {{ range $key, $value := .Site.Taxonomies.categories }}
          <a class="navbar-item {{ if eq $.Permalink .Page.Permalink }}is-active{{ end }}" href="{{ .Page.Permalink }}">
            {{ $key | humanize }}
            <span class="tag ml-2 is-rounded">{{ len . }}</span>
          </a>
          {{ end }}
        </div>
      </div>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          Dossiers
        </a>
        <div class="navbar-dropdown">
          {{ range where .Site.Pages "Params.Code" "!=" nil }}
          <a class="navbar-item {{ if eq $.Permalink .Page.Permalink }}is-active{{ end }}" href="{{ .Page.Permalink }}">
            {{ .Title | humanize }}
            {{ $casePosts := where .Site.RegularPages "CurrentSection.Params.Code" "==" .Params.Code }}
            <span class="tag ml-2 is-rounded">{{ len $casePosts }}</span>
          </a>
          {{ end }}
        </div>
      </div>
    </div>
    <!-- start/end menu shares the exact same code, just not the same position, factorize with a loop -->
    {{ $currentPage := . }}
    {{ range (slice "start" "end")}}
    {{ $menuName := . }}
    <div class="navbar-{{ . }} mr-2">
      <!-- now get the menu if it exists -->
      {{ with index $.Site.Menus $menuName }}
      <!-- and range over its pages -->
      {{ range . }}
      {{ if .HasChildren }}
      <div class="navbar-item has-dropdown is-hoverable {{ if $currentPage.HasMenuCurrent $menuName . }}is-active is-tab{{ end }}">
        <a class="navbar-link">
          {{ .Pre }}
          <span>{{ .Name }}</span>
        </a>
        <div class="navbar-dropdown">
          {{ range .Children }}
          <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menuName . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
          {{ end }}
        </div>
      </div>
      {{ else }}
      <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menuName . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
      {{ end }}
      {{ end }}
      {{ end }}
    </div>
    {{ end }}
    <div class="navbar-end ml-0 mr-4">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <!-- Each item should have a corresponding assets/img/x.png and link in config.yaml -->
            {{ range (slice "rss" "mastodon" "peertube" "funkwhale" "gitea" "github" "mail" )}}
            {{ $imageName := . }}
            <!-- Get image and resize to logo size -->
            {{ $imagePath := printf "img/%s.png" $imageName }}
            {{ $image := resources.Get $imagePath }}
            {{ $imageResized := $image.Resize "64x" }}
            <!-- Get logo link in site params (index allows to use a dynamic parameter name) -->
            <a class="navbar-item" href="{{ index $.Site.Params $imageName }}">
              <img src="{{ $imageResized.Permalink }}">
            </a>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
<script>
  document.addEventListener('DOMContentLoaded', () => {

// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

// Add a click event on each of them
$navbarBurgers.forEach( el => {
  el.addEventListener('click', () => {

    // Get the target from the "data-target" attribute
    const target = el.dataset.target;
    const $target = document.getElementById(target);

    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
    el.classList.toggle('is-active');
    $target.classList.toggle('is-active');

  });
});

});
</script>