nav.html

{{- $searchProvider := partial "search-provider.html" . -}}
{{- $search := site.Params.search | default (dict) -}}
<nav class="navbar navbar-expand-md navbar-light navbar-custom fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{ "" | relLangURL }}">{{ .Site.Params.homeTitle | default .Site.Title }}</a>
    <div class="d-flex align-items-center">
      {{ if ne ($.Param "toc") false }}
      {{ $tocState := partial "func/toc-state.html" . }}
      {{ if or $tocState.hasToc $tocState.hasListPages }}
      <button class="theme-toggle" id="toc-toggle" aria-label="Table of contents" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Table of contents">
        <span class="fas fa-list"></span>
      </button>
      {{ end }}
      {{ end }}
      {{ if eq ($.Param "colorScheme" | default "auto") "auto" }}
      <button class="theme-toggle" id="theme-toggle" aria-label="{{ i18n "themeToggleLabel" }}" data-bs-toggle="tooltip" data-bs-placement="bottom" data-tooltip-auto="{{ i18n "themeTooltipAuto" }}" data-tooltip-light="{{ i18n "themeTooltipLight" }}" data-tooltip-dark="{{ i18n "themeTooltipDark" }}" title="{{ i18n "themeTooltipAuto" }}">
        <span class="fas fa-adjust" id="theme-icon-auto"></span>
        <span class="fas fa-sun" id="theme-icon-light" style="display: none;"></span>
        <span class="fas fa-moon" id="theme-icon-dark" style="display: none;"></span>
      </button>
      {{ end }}
      {{ if ne $searchProvider "none" }}
      <button class="theme-toggle" id="search-toggle" aria-label="{{ i18n "searchToggleLabel" | default "Search" }}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ i18n "searchToggleLabel" | default "Search" }}">
        <span class="fas fa-search"></span>
      </button>
      {{ end }}
      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="{{ i18n "toggleNavigation" }}">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="navbar-nav ms-auto">
        {{ range .Site.Menus.main.ByWeight }}
          {{ $name := partial "func/menu-name.html" . }}
          {{ if .HasChildren }}
            <li class="nav-item dropdown" >
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                {{ $name }}
              </a>
              <ul class="dropdown-menu dropdown-menu-end">
                {{ range .Children }}
                  {{ $childName := partial "func/menu-name.html" . }}
                  <li><a class="dropdown-item" href="{{ .URL | relLangURL }}">{{ $childName }}</a></li>
                {{ end }}
              </ul>
            </li>
          {{ else }}
            <li class="nav-item" >
              <a class="nav-link" title="{{ $name }}" href="{{ .URL  | relLangURL }}">{{ $name }}</a>
            </li>
          {{ end }}
        {{ end }}

          {{ if hugo.IsMultilingual }}
            {{ $pageTranslations := .AllTranslations }}
            {{ $siteLanguages := .Site.Home.AllTranslations }}
            {{ if ge (len $siteLanguages) 3 }}
              {{ if .IsTranslated }}
                <li class="nav-item dropdown" >
                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    {{ i18n "languageSwitcherLabel" }}
                  </a>
                  <ul class="dropdown-menu dropdown-menu-end">
                    {{ range $pageTranslations }}
                      {{ if not (eq .Lang $.Site.Language.Lang) }}
                      <li><a class="dropdown-item" href="{{ .Permalink }}">{{ default .Lang .Site.Language.LanguageName }}</a></li>
                      {{ end }}
                    {{ end }}
                  </ul>
                </li>
              {{ end }}
            {{ else }}
            {{ if .IsTranslated }}
              {{ range .Translations }}
                <li class="nav-item" >
                  <a class="nav-link" href="{{ .Permalink }}">{{ default .Lang .Site.Language.LanguageName }}</a>
                </li>
              {{ end}}
            {{ end }}
          {{ end }}
        {{ end }}

        {{ with .Site.Params.gcse }}
          <li class="nav-item" >
            <a class="nav-link" href="#modalSearch" data-bs-toggle="modal" data-bs-target="#modalSearch" style="outline: none;">
              <span class="d-md-none">{{ i18n "gcseLabelShort" }}</span> <span id="searchGlyph" class="fas fa-search" aria-hidden="true"></span>
            </a>
          </li>
        {{ end }}
      </ul>
      {{ partial "nav_custom.html" . }}
    </div>

    {{ $page := . }}
    {{ if ne (.Params.showAvatar | default true) false }}
      {{ with .Site.Params.logo }}
        <div class="avatar-container">
          <div class="avatar-img-border">
            <a title="{{ $page.Site.Title }}" href="{{ "" | relLangURL }}">
            {{- $image := resources.Get . -}}
            {{ if $image }}
              <img class="avatar-img" src="{{ ($image.Fit "300x300 webp q100").RelPermalink }}" alt="{{ $page.Site.Title }}" />
            {{else}}
              <img class="avatar-img" src="{{ strings.TrimPrefix "/" . | relURL }}" alt="{{ $page.Site.Title }}" />
             {{end}}
            </a>
          </div>
        </div>
      {{ end }}
    {{ end }}

  </div>
</nav>

<!-- Navbar Search Overlay -->
{{ if ne $searchProvider "none" }}
<div id="navbar-search-overlay" class="navbar-search-overlay" aria-hidden="true" role="search">
  <div class="navbar-search-inner container-fluid">
    <span class="fas fa-search navbar-search-icon" aria-hidden="true"></span>
    <input type="search" id="navbar-search-input" class="navbar-search-input"
           placeholder="{{ $search.placeholder | default (i18n "searchPlaceholder" | default "Search posts and pages..." ) }}"
           aria-label="{{ i18n "searchToggleLabel" | default "Search" }}"
           autocomplete="off">
    <button id="navbar-search-close" class="theme-toggle" aria-label="{{ i18n "searchCloseLabel" | default "Close search" }}">
      <span class="fas fa-times"></span>
    </button>
  </div>
  <div id="navbar-search-results" class="navbar-search-results container-fluid" aria-live="polite"></div>
</div>
<script>
  window.searchProviderConfig = {
    provider: "{{ $searchProvider }}",
    searchIndexURL: {{ "index.json" | relLangURL }},
    searchPageURL: {{ "search" | relLangURL }}
  };
  window.searchConfig = {
    noResultsText: "{{ $search.no_results_text | default (i18n "searchNoResultsText" | default "No results found for " ) }}",
    untitledText: "{{ $search.untitled_text | default (i18n "searchUntitledText" | default "Untitled" ) }}"
  };
</script>
{{ end }}

<!-- Search Modal -->
{{ $page := . }}
{{ with .Site.Params.gcse }}
  <div id="modalSearch" class="modal fade" role="dialog" aria-modal="true" aria-labelledby="searchModalTitle">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="searchModalTitle">{{ i18n "gcseLabelLong" $page }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <gcse:search></gcse:search>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ i18n "gcseClose" }}</button>
        </div>
      </div>
    </div>
  </div>
{{ end }}