{{ $here := .RelPermalink }}
<nav class="navbar navbar-expand-lg bg-white bg-opacity-75 sticky-top border-bottom" data-bs-theme="light" style="backdrop-filter: blur(8px);">
  <div class="container py-1">
    <a class="navbar-brand fw-bold d-flex align-items-center gap-2" href="{{ "index.html" | relURL }}">
      <img class="brand-mark" src="{{ "assets/img/cspresso.svg" | relURL }}" alt="cspresso">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
        {{ $docs := ("docs.html" | relURL) }}
        {{ $recipes := ("recipes.html" | relURL) }}
        {{ $evaluate := ("evaluate.html" | relURL) }}
        {{ $security := ("security.html" | relURL) }}
        <li class="nav-item"><a class="nav-link{{ if eq $here $docs }} active fw-semibold{{ end }}" href="{{ $docs }}">Docs</a></li>
        <li class="nav-item"><a class="nav-link{{ if eq $here $recipes }} active fw-semibold{{ end }}" href="{{ $recipes }}">Recipes</a></li>
        <li class="nav-item"><a class="nav-link{{ if eq $here $evaluate }} active fw-semibold{{ end }}" href="{{ $evaluate }}">Evaluate</a></li>
        <li class="nav-item"><a class="nav-link{{ if eq $here $security }} active fw-semibold{{ end }}" href="{{ $security }}">Security</a></li>
        <li class="nav-item ms-lg-2">
          <a class="btn btn-sm btn-outline-dark" href="https://git.mig5.net/mig5/cspresso" target="_blank" rel="noreferrer">
            <i class="bi bi-git"></i> Repo
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>