{{ $section := .Section }}
{{ with (.Site.GetPage "/headless/menu") }}
  <div class="main-menu z-2">
    <a href="/">
      {{ partial "logo.html" . }}
    </a>

    <div class="d-flex d-xl-none justify-content-end align-items-center gap-4">
      {{ if eq $section "documentation" }}
        <div class="d-block d-xl-none">
          {{ partial "theme-switch" . }}
        </div>
      {{ end }}
      <button type="button" class="main-menu__trigger">{{ partial "svg" "hamburger-menu-white.svg" }}</button>
    </div>
    <ul class="main-menu__links">
      {{ range .Params.menuItems }}
        <li class="main-menu__item">
          {{ if .url }}
            <a class="menu-link" href="{{ .url }}">{{ .name }}</a>
          {{ else }}
            <span>{{ .name }}</span>
          {{ end }}

          {{ if .subMenuItems }}
            <ul class="main-menu__submenu">
              {{ if .url }}
                <li class="main-menu__section-link">
                  <a class="link link_neutral link_sm" href="{{ .url }}">
                    {{ .name }}
                  </a>
                </li>
              {{ end }}
              {{ range .subMenuItems }}
                <li class="main-menu__submenu-item">
                  <a
                    href="{{ .url }}"
                    {{ if strings.HasPrefix .url "http" }}target="_blank" rel="noopener noreferrer nofollow"{{ end }}
                  >
                    <img src="/img/menu/{{ .icon }}" draggable="false" />
                    <span>{{ .name }}</span>
                  </a>
                </li>
              {{ end }}
            </ul>
          {{ end }}
        </li>
      {{ end }}
    </ul>
    <div class="main-menu__buttons">
      {{ if eq $section "documentation" }}
        {{ partial "theme-switch" . }}
      {{ end }}
      <a data-metric-loc="nav" href="{{ .Params.logIn.url }}" class="menu-link mx-3">{{ .Params.logIn.text }}</a>
      <a data-metric-loc="nav" href="{{ .Params.startFree.url }}" class="button button_contained button_sm">{{ .Params.startFree.text }}</a>
    </div>
  </div>
{{ end }}