<div class="navbar" role="navigation">
    <nav class="menu" aria-label="Main Navigation">
        <a href="{{ .Site.Home.Permalink }}" class="logo">
            {{ partial "svgs/home.svg" (dict "height" 25 "width" 25) . }}
        </a>
        <input type="checkbox" id="menu-trigger" class="menu-trigger" />
        <label for="menu-trigger">
            <span class="menu-icon">
                {{ partial "svgs/menu.svg" (dict "height" 25 "width" 25) . }}
            </span>
        </label>

        <div class="trigger">
            <ul class="trigger-container">
                {{ $currentPage := . }}
                {{ range .Site.Menus.main }}
                <li>
                    <a class="menu-link {{ if or ($currentPage.IsMenuCurrent "main" .)
                        ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}" href="{{ .URL }}">
                        {{ .Name }}
                    </a>
                    {{ if .HasChildren }}
                    <ul>
                        {{ range .Children }}
                        <li>
                            <a class="menu-link {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}"
                                href="{{ .URL }}">
                                {{ .Name }}
                            </a>
                        </li>
                        {{ end }}
                    </ul>
                    {{ end }}
                </li>
                {{ end }}
                <li class="menu-separator">
                    <span>|</span>
                </li>
                <!-- Language List -->
                {{ if .IsTranslated }}
                    <li>
                        <select aria-label="Select Language" class="lang-list" id="select-language" onchange="location = this.value;">
                            {{ $siteLanguages := .Site.Languages}}
                            {{ $pageLang := .Page.Lang}}
                            {{ range .Page.AllTranslations }}
                                {{ $translation := .}}
                                {{ range $siteLanguages }}
                                    {{ if eq $translation.Lang .Lang }}
                                        {{ $selected := false }}
                                        {{ if eq $pageLang .Lang}}
                                            <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageCode | upper }}
                                            </option>
                                        {{ else }}
                                            <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageCode | upper }}</option>
                                        {{ end }}
                                    {{ end }}
                                {{ end }}
                            {{ end }}
                        </select>                
                    </li>
                    <li class="menu-separator">
                        <span>|</span>
                    </li>
                {{ end }}
            </ul>
            <a id="mode" href="#">
                {{ partial "svgs/sun.svg" (dict "height" 21 "width" 21 "class" "mode-sunny" "title" "LIGHT") . }}
                {{ partial "svgs/sun.svg" (dict "height" 21 "width" 21 "class" "mode-moon" "title" "DARK") . }}
            </a>
        </div>
    </nav>
</div>
