fediversity_website/themes/nluug/layouts/partials/header.html

{{ $.Scratch.Set "counter" 0 }}
{{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}

<header>
  <div class="header-content">

    <!-- Logo wordt nu benoemd als URL, dus we strippen de eerste slash, vervolgens halen we deze uit de assets directory -->
    <!-- Logo staat zowel in assets als static, zodat deze gekopieerd worden. Dit is een TODO om te ontdubbelen -->
    {{ $logoresource := resources.Get (.Site.Params.logoNormal | replaceRE "^/" "") }}

    <a class="logo" href="{{ "/" | relLangURL }}" title="{{ strings.FirstUpper (i18n "back_to_home") }}">
      <figure>
        <picture>
          {{ $isJPG := eq (path.Ext $logoresource) ".jpg" }}
          {{ $isPNG := eq (path.Ext $logoresource) ".png" }}

          {{ if ($isJPG) -}}
            {{ $webpPath:= replace $logoresource ".jpg" ".webp" }}
            {{ $webpPathStatic:= printf "assets/%s" $webpPath }}

            {{ if (fileExists $webpPathStatic) -}}
              <source srcset="/{{ $webpPath | safeURL }}" type="image/webp">
            {{- end }}
          {{- end }}

          {{ if ($isPNG) -}}
            {{ $webpPath:= replace $logoresource ".png" ".webp" }}
            {{ $webpPathStatic:= printf "assets/%s" $webpPath }}

            {{ if (fileExists $webpPathStatic) -}}
              <source srcset="/{{ $webpPath | safeURL }}" type="image/webp">
            {{- end }}
          {{- end }}

          <img class="max-width" src="{{ .Site.Params.logoNormal | safeURL }}" alt="NLUUG-logo" decoding="async" width="{{ $logoresource.Width }}" height="{{ $logoresource.Height }}">
        </picture>
      </figure>
    </a>

<!--
    TODO (2023-06-18) - Deze regel mag weg als blijkt dat bovenstaande manier van laden van het logo goed functioneert
    <a href="{{ "/" | relLangURL }}" class="logo" title="{{ strings.FirstUpper (i18n "back_to_home") }}"><img class="max-width" src="{{ $logoresource | relURL }}" alt="NLUUG-logo" width="{{ $logoresource.Width }}" height="{{ $logoresource.Height }}"></a>
-->
    <input type="checkbox" id="hamburger" aria-label="menu button">
    <label for="hamburger" aria-hidden="true"><span>&nbsp;</span></label>

    <nav aria-label="Hoofdmenu">

       <ul class="menus menu" role="menubar" aria-label="Menu bovenzijde">
           {{ $currentPage := . }}
           {{ range .Site.Menus.main }}
             {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
             {{ if .Children }}
               <li role="none">
                 <!-- <button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown-{{ $.Scratch.Get "counter" }}" aria-labelledby="button-link-{{ $.Scratch.Get "counter" }}"></button> -->
                 <a id="button-link-{{ $.Scratch.Get "counter" }}" href="{{ .URL }}" role="menuitem" aria-haspopup="true" aria-expanded="true">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a>
                 <ul class="dropdown" id="dropdown-{{ $.Scratch.Get "counter" }}" role="menu">
                   {{ range .Children }}
                     <li role="none"><a href="{{ .URL }}" role="menuitem">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a></li>
                   {{ end }}
                 </ul>
               </li>
             {{ else }}
             <li role="none">
               <!-- <button type="button" aria-haspopup="true" aria-expanded="true" aria-labelledby="button-link-{{ $.Scratch.Get "counter" }}"></button> -->
               <a id="button-link-{{ $.Scratch.Get "counter" }}" href="{{ .URL }}" role="menuitem">{{ or (T .Identifier) .Name | strings.FirstUpper | safeHTML }}</a>
             </li>
             {{ end }}
           {{ end }}


         </ul>
    </nav>
  </div>
</header>