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 }}">
        {{ $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()">
        <i class="fa-solid fa-grip-lines {{ 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 }}"></i>
      </button>
      <div class="collapse navbar-collapse flex-grow-0">
        <ul class="navbar-nav">
          {{- $firstUrlElement := print "/" (index (split .RelPermalink "/") 1) "/" -}}
          {{- 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 }}
        </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()"><i class="fa-solid fa-xmark {{ if eq $theme "dark" }}text-white{{ else if eq $theme "light" }}text-dark{{ else }}{{ end }}"></i></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 }}
          </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>