{{"<!-- navigation -->" | safeHTML }}
<div class="navigation fixed-top transition">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark p-0">
      <a class="navbar-brand p-0" href="{{ .Site.BaseURL | relLangURL }}">
        {{ partial "logo.html" (dict "Alt" .Site.Title)}}
      </a>
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"
        aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-bars"></i>
        <i class="fas fa-times"></i>
      </button>

      <div class="collapse navbar-collapse" id="navigation">
        <ul class="navbar-nav ml-auto m-2">
          <!-- <li class="nav-item">
            <a class="nav-link text-white text-capitalize" href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Home
              }}</a>
          </li> -->
          {{ range .Site.Menus.main }}
          {{ if .HasChildren }}
          <li class="nav-item dropdown">
            <a class="nav-link text-white text-capitalize dropdown-toggle" href="#" role="button"
              data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {{ .Name }}
            </a>
            <div class="dropdown-menu">
              {{ range .Children }}
              <a class="dropdown-item text-color" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
              {{ end }}
            </div>
          </li>
          {{ else }}
          <li class="nav-item">
            <a class="nav-link text-white text-capitalize" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
          </li>
          {{ end }}
          {{ end }}
        
        </ul>

        {{ if .Site.Params.navigation_button.enable }}
        {{ "<!-- get start btn -->" | safeHTML }}
        <a href="{{ .Site.Params.navigation_button.link | absURL }}"
          class="btn btn-white btn-sm text-white small bg-white me-2">{{ .Site.Params.navigation_button.label }}</a>
        {{ end }}

        <!-- Language List -->
        {{ if .IsTranslated }}
        <div class="dropdown">
          <a class="dropdown-toggle d-inline-flex align-items-center"
                  type="button"
                  id="langDropdown"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="">
            <i class="fa-solid fa-language me-2" aria-hidden="true"></i>
        </a>

          <ul class="dropdown-menu dropdown-menu-lang dropdown-menu-end" aria-labelledby="langDropdown">
            {{ $siteLanguages := .Site.Languages }}
            {{ $pageLang := .Page.Lang }}
            {{ range .Page.AllTranslations }}
              {{ $translation := . }}
              {{ range $siteLanguages }}
                {{ if eq $translation.Lang .Lang }}
                  <li>
                    <a class="dropdown-item {{ if eq $pageLang .Lang }}active{{ end }}"
                      rel="alternate"
                      hreflang="{{ .Lang }}"
                      lang="{{ .Lang }}"
                      href="{{ $translation.Permalink }}">
                      {{ .LanguageName }}
                    </a>
                  </li>
                {{ end }}
              {{ end }}
            {{ end }}
          </ul>
        </div>
        {{ end }}

        
      </div>
    </nav>
  </div>
</div>
{{"<!-- nav part end -->" | safeHTML }}