<header class="container">
  <nav class="main-nav" id="js-navbar">
    <a class="logo" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
    <ul class="menu" id="js-menu">
      {{ $currentPage := . }}
      {{ range .Site.Menus.main }}
      {{ if .HasChildren }}
      <li class="menu-item">
        <span class="menu-link">{{ .Name }}<span class="drop-icon">▾</span></span>
        <ul class="sub-menu">
          {{ range .Children }}
            <li class="menu-item">
              <a href="{{ .URL }}" class="menu-link">{{ .Name }}</a>                  
            </li>
          {{ end }}
        </ul>
      </li>
      {{ else }}
        <li class="menu-item">
          <a href="{{ .URL }}" class="menu-link">{{ .Name }}</a>
        </li>
      {{ end }}
      {{ end }}
      <li class="menu-item--align">
        <div class="switch">
          <input class="switch-input" type="checkbox" id="themeSwitch">
          <label aria-hidden="true" class="switch-label" for="themeSwitch">On</label>
          <div aria-hidden="true" class="switch-marker"></div>
        </div>
      </li>
    </ul>
    <span class="nav-toggle" id="js-navbar-toggle">
      <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="30" height="30" fill="var(--color-contrast-high)"><rect y="11" width="24" height="2" rx="1"/><rect y="4" width="24" height="2" rx="1"/><rect y="18" width="24" height="2" rx="1"/></svg>
    </span>
  </nav>
</header>