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

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

    <a href="/" class="logo"><img src="{{ .Site.Params.logoNormal }}" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>

    <input type="checkbox" id="hamburger" aria-label="menu button">
    <label for="hamburger"><span></span></label>

    <nav aria-label="main navigation">

       <ul class="menus menu">
           {{ $currentPage := . }}
           {{ range .Site.Menus.main }}
               {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
             {{ if .Children }}
               <li>
                 <button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown{{ $.Scratch.Get "counter" }}"><a href="{{ .URL }}">{{ .Name }}</a><!-- <span class="arrow"></span>--></button>
                 <ul class="dropdown" id="dropdown{{ $.Scratch.Get "counter" }}">
                   {{ range .Children }}
                     <li><a href="{{ .URL }}">{{ .Name }}</a></li>
                   {{ end }}
                 </ul>
               </li>
             {{ else }}
             <li><button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown{{ $.Scratch.Get "counter" }}"><a href="{{ .URL }}">{{ .Name }}</a></button></li>
             {{ end }}
           {{ end }}
         </ul>
    </nav>
    <a href="/zoeken/">{{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass") }}</a>
  </div>
</header>