cremeaux/layouts/partials/header.html

{{ $isBig := (default .IsHome .Params.big) }}
{{ $imageSizeSmall := cond $isBig "600x600 Top webp" "600x400 Center webp" }}
{{ $imageSizeBig := cond $isBig "1920x850 Top webp" "1920x450 Center webp" }}
<header class="header{{ if $isBig }} home{{ end }}">
  {{ $headless := .Site.GetPage "/" }}
  {{ $image := default ($headless.Resources.GetMatch "**.jpg") (.Resources.GetMatch (default "**.jpg" .Params.image)) }}
  {{ if $image }}
    {{ $resizedSmall := $image.Fill $imageSizeSmall }}
    {{ $resizedBig := $image.Fill $imageSizeBig }}
    <img
      class="hero no-print"
      src="{{ $resizedSmall.RelPermalink }}"
      srcset="{{ $resizedSmall.RelPermalink }} 600w, {{ $resizedBig.RelPermalink }} 1920w"
      sizes="(max-width: 600px) 500px, 1920px"
      alt="{{ .Params.image_ }}"
      title="{{ .Params.image_ }}"
     />
  {{ end }}
  <nav class="nav" id="nav" data-open="false">
    <div class="container">
      <div class="logo">
        <a href="/" class="">
          <img src="/icons/logo-entete-200x70.svg" alt="Blason de Crémeaux" />
        </a>
      </div>
      <button class="open-button" onClick="document.getElementById('nav').setAttribute('data-open', true)">≡ Menu</button>
      <ol id="menu">
        {{ range .Site.Menus.main }}
        <li class="menu{{ if .HasChildren }} withSubmenu{{ end }}">
          <a href="{{ .URL }}">
            <img class="icons" src="/icons/{{ .Identifier }}.svg" alt="{{ .Name }}" width="30" height="30" /><span>{{ .Name }}</span>
          </a>
          {{ if .HasChildren }}
          <ol class="submenu">
            {{ range .Children }}
              <li>
                <a href="{{ .URL }}">{{ .Name }}</a>
              </li>
            {{ end }}
          </ol>
          {{ end }}
        </li>
        {{ end }}
      </ol>
      <button class="close-button" onClick="document.getElementById('nav').setAttribute('data-open', false)">✖ Fermer</button>
    </div>
  </nav>
</header>