{{#navbar}}
<nav class="navbar fixed-top navbar-dark navbar-expand-lg bg-primary">
  <div class="container">
    {{#includes}}{{{before_title}}}{{/includes}}
    <a class="navbar-brand me-2" href="{{#site}}{{root}}{{/site}}index.html">{{#site}}{{title}}{{/site}}</a>

    <small class="nav-text {{#development}}text-{{version_label}}{{/development}} me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{#development}}{{version_tooltip}}{{/development}}">{{#package}}{{version}}{{/package}}</small>

    {{#includes}}{{{before_navbar}}}{{/includes}}
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="{{#translate}}{{toggle_nav}}{{/translate}}">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div id="navbar" class="collapse navbar-collapse ms-2">
      {{#left}}
      <ul class="navbar-nav me-auto">
      {{{.}}}
      </ul>
      {{/left}}

      <form class="form-inline my-2 my-lg-0" role="search">
        <input type="search" class="form-control me-sm-2" aria-label="{{#translate}}{{toggle_nav}}{{/translate}}" name="search-input" data-search-index="{{#site}}{{root}}{{/site}}search.json" id="search-input" placeholder="{{#translate}}{{search_for}}{{/translate}}" autocomplete="off">
      </form>

      {{#right}}
      <ul class="navbar-nav">
      {{{.}}}

        {{#yaml}}{{#toggle}}
        <li>
          <a class="external-link nav-link" id="css-toggle-btn" aria-label="github">
            <span class="fas fa fas fa-adjust fa-lg"></span>
          </a>
        </li>
        {{/toggle}}{{/yaml}}
        {{#yaml}}{{#ko-fi-sponsor}}
          <li>
            <a href={{{url}}}>
              <img width="24" height="24" style="margin-top: -2px !important" src="https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/5ca5bf1dff3c03fbf7cc9b3c_Kofi_logo_RGB_rounded-p-500.png">
            </a>
          </li>
        {{/ko-fi-sponsor}}{{/yaml}}
        {{#yaml}}{{#github-sponsor}}
          <li>
            <a href="{{{url}}}" class="external-link nav-link" id="css-toggle-btn" aria-label="github">
              <span class="fa fa-heart fa-lg" style="color: #ea4aaa"></span>
            </a>
          </li>
        {{/github-sponsor}}{{/yaml}}
      </ul>

      {{/right}}
    </div>

    {{#includes}}{{{after_navbar}}}{{/includes}}
  </div>
</nav>
{{/navbar}}