<nav
    class="navbar navbar-expand-md sticky-top navbar-light bg-light"
    id="mainnav"
>
    <div class="container">
        <a
            class="h1 navbar-brand d-flex align-items-top gap-2 mb-0"
            href="/{{ .Site.Language.Lang }}/"
        >
            <img src="/img/apple-touch-icon.png" alt="" style="height: 24px" />
            {{ partial "logo.html" (dict "height" "25") }}
        </a>
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarCollapse"
            aria-controls="navbarCollapse"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div
            class="collapse navbar-collapse justify-content-between"
            id="navbarCollapse"
        >
            <ul class="navbar-nav">
                {{ range .Site.Menus.main }} {{ if .HasChildren }}
                <li class="nav-item dropdown">
                    <a
                        class="nav-link dropdown-toggle"
                        href="#"
                        id="navbarDropdown"
                        role="button"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                    >
                        {{ .Name }}
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        {{ range .Children }}
                        <a href="{{ .URL }}" class="dropdown-item"
                            >{{ .Name }}</a
                        >
                        {{ end }}
                    </div>
                    {{ else }}
                </li>

                <li class="nav-item">
                    <a href="{{ .URL }}" class="nav-link">{{ .Name }}</a>
                    {{ end }}
                </li>
                {{ end }}
            </ul>
            <div class="d-flex">
                <div class="nav-item nav-ext-links">
                    {{ if .Site.Params.others_links }} {{ range
                    .Site.Params.others_links }}
                    <a
                        href="{{ .href }}"
                        title="{{ .text }}"
                        class="nav-icon-link {{ .class }}"
                        data-umami-event="nav-{{ .id }}"
                    >
                        <i class="bi {{ .icon }}"></i>
                        {{ .text }}
                    </a>
                    {{ end }} {{ end }}
                </div>
                <div class="nav-item dropdown">
                    <a
                        class="btn btn-outline-secondary dropdown-toggle"
                        href="#"
                        id="navbarLangDropdown"
                        role="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                    >
                        <i class="bi bi-globe"></i> {{ .Language.Lang | upper }}
                    </a>
                    <div
                        class="dropdown-menu dropdown-menu-end"
                        aria-labelledby="navbarLangDropdown"
                    >
                        {{ range .Site.Home.AllTranslations }}
                        <a href="{{ .Permalink }}" class="dropdown-item"
                            >{{ .Language.LanguageName }}</a
                        >
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
