{% assign about = site.posts | find: "layout", "about" %}

<nav class="navbar navbar-expand-lg navbar-light bg-light d-print-block" role="navigation" aria-label="{{ site.i18n.menu.title }}">
  <a class="navbar-brand" href="?#">
    {% if about.logo.path %}
      <img src="{{ about.logo.path | thumbnail: nil, 30 | uri_escape }}" height="30" alt="{{ about.logo.description | default: about.title }}" />
    {% else %}
      {{ about.title }}
    {% endif %}
  </a>

  {% comment %}
    TODO: Add CSS-only hamburger menu.
  {% endcomment %}
  <ul class="navbar-nav d-print-none">
    {%- for item in site.i18n.menu.items -%}
      {% comment %}
        This makes it hard to just cache the whole navbar, but we prefer
        to mark the active item in code rather than with JS.
      {% endcomment %}

      <li class="nav-item">
        <a class="nav-link{% if page.url == item.url %} active{% endif %}" href="{{ item.url }}">
          {{ item.text }}

          {%- if page.url == item.url -%}
            <span class="sr-only">
              {{ site.i18n.menu.active | default: '(current)' }}
            </span>
          {%- endif %}
        </a>
      </li>
    {%- endfor -%}
  </ul>
</nav>