{#
Section:    site
Component:  header
#}
<div id="site-options">
  <div class="container">
    <ul class="list-inline no-comma m-0">
      <li class="list-inline-item"><a href="#page-title">Skip to Content</a></li>
      <li class="list-inline-item"><a href="/web-text"><img src="/img/fonts.svg" alt="Icon for Font Size" class="d-inline"><span class="d-none d-md-inline">Customize Text</span></a></li>
      <li class="list-inline-item"><a href="/translations"><img src="/img/translate.svg" alt="Icon for Translations" class="d-inline"><span class="d-none d-md-inline">Translations</span></a></li>
    </ul>
  </div>
</div>

<nav id="site-nav" class="navbar navbar-expand-lg">
  <div class="container">
    <a href="/" class="navbar-brand">
      <h1 class="m-0 p-0"><span id="site-title">Veilid</span><img src="/img/Veilid.svg" alt="Veilid Logo" id="site-logo" /></h1>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <img src="/list.svg" alt="Toggle Menu">
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="header-nav nav-underline">
        {%- for menu in site.menus.main|sort_by_weight ~%}
          {% if loop.index0 > 0 %}
            <li class="nav-item">
              <a class="nav-link{% if url(menu.url) in url(page) %} active"  aria-current="page{% else %}" href="{{ url(menu.url) }}{% endif %}">
                {% if menu.name == "Documentation" %}Docs{% else %}{{ menu.name }}{% endif %}
              </a>
            </li>
          {% endif %}
        {%- endfor ~%}
      </ul>
    </div>
  </div>
</nav>