ura.design/layouts/partials/menu.html

<div class="container-fluid">
    <div class="container">
      <nav class="navbar navbar-expand-lg justify-content-between align-items-center" aria-label="Primary">
        <a aria-label="Ura Logo" class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
          {{ $theme := .Page.Params.theme }}
          {{ $type := .Page.Type }}
          {{ $home := .IsHome }}
          {{ if .IsHome }}
          {{ partial "logo.html" "white" }}
          {{ else if eq .Page.Type "about" }}
          {{ partial "logo.html" "white" }}
          {{ else if eq $theme "dark" }}
          {{ partial "logo.html" "white" }}
          {{ else if eq $theme "light" }}
          {{ partial "logo.html" "dark" }}
          {{ else }}
          {{ partial "logo.html" "default" }}
          {{ end }}
        </a>
        <button class="navbar-toggler" type="button" aria-label="Toggle navigation" onclick="openNav()">
          <span class="inline-svg">
            <svg class="{{ if .IsHome }}text-white{{ else if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else if eq $type "about" }}text-white{{ else }}color-blue-500{{ end }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 288C433.7 288 448 302.3 448 320C448 337.7 433.7 352 416 352H32C14.33 352 0 337.7 0 320C0 302.3 14.33 288 32 288H416zM416 160C433.7 160 448 174.3 448 192C448 209.7 433.7 224 416 224H32C14.33 224 0 209.7 0 192C0 174.3 14.33 160 32 160H416z"></path></svg>
          </span>
        </button>
        <div class="collapse navbar-collapse flex-grow-0">
          <ul class="navbar-nav">
            {{- $firstUrlElement := print "/" (index (split .RelPermalink "/") 2) "/" -}}
            {{- range .Site.Menus.main -}}
            <li class="nav-item ms-4">
              <a class="nav-link {{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else if $home }}text-white{{ else if eq $type "about" }}text-white{{ else }}{{ end }} {{ if eq ($firstUrlElement|lower) (.URL|lower) }}active{{end}}" {{ if eq
                ($firstUrlElement|lower) (.URL|lower) }}aria-current="page" {{end}} href="{{ .URL | absLangURL }}">{{ .Name }}</a>
            </li>
            {{ end }}

            {{ if .IsTranslated }}
            {{ range .Translations }}
            <li class="nav-item ms-4">
              <a class="nav-link language text-uppercase {{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else if $home }}text-white{{ else if eq $type "about" }}text-white{{ else }}{{ end }}" href ="{{ .Permalink }}">{{ .Lang }}</a>
            </li>
            {{ end }}
            {{ end }} 
            
          </ul>
        </div>
      </nav>
      <div id="navbar-mobile" class="overlay d-block d-lg-none" {{ if .Params.background }}style="background-color: {{ .Params.background }};"{{ else }}{{ end }}>
        <div class="container-fluid">
          <div class="container">
            <div class="navbar align-items-center justify-content-between">
              <a aria-label="Ura Logo" class="brand" href="{{ .Site.BaseURL }}">

                {{ if eq $theme "dark" }}
                {{ partial "logo.html" "white" }}
                {{ else if eq $theme "light" }}
                {{ partial "logo.html" "dark" }}
                {{ else }}
                {{ partial "logo.html" "white" }}
                {{ end }}

              </a>
              <button type="button" class="closebtn" aria-label="Toggle navigation" onclick="closeNav()">
                <span class="inline-svg">
                  <svg class="{{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else }}{{ end }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path></svg>
                </span>
              </button>
          </div>
        </div>
        <div class="overlay-content">
            <div class="container pt-4">
              {{- $firstUrlElement := print "/" (index (split .RelPermalink "/") 1) "/" -}}
              {{- range .Site.Menus.main -}}
                <a class="{{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else }}{{ end }} {{ if eq ($firstUrlElement|lower) (.URL|lower) }}active{{end}}" {{ if eq
                  ($firstUrlElement|lower) (.URL|lower) }}aria-current="page" {{end}} href="{{ .URL | absLangURL }}">{{ .Name }}</a>
              {{ end }}
              {{ if .IsTranslated }}
              {{ range .Translations }}
              <a class="language text-uppercase {{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else if $home }}text-white{{ else if eq $type "about" }}text-white{{ else }}{{ end }}" href ="{{ .Permalink }}">{{ partial "fontawesome.html" "solid/language" }} {{ .Lang }}</a>
              {{ end }}
              {{ end }}
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
function openNav() {
  document.getElementById("navbar-mobile").style.height = "100%";
}
function closeNav() {
  document.getElementById("navbar-mobile").style.height = "0%";
}
</script>