{% if site.data[site.component_data_dirname][site.component_data_navbar] %}
{% assign navbar = site.data[site.component_data_dirname][site.component_data_navbar] %}
{% else %}
{% assign navbar = site.data.base.navbar %}
{% endif %}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark bg-image shadow" aria-label="{{ include.arialable | default: 'navbar'}}">
  <div class="container">
    <a class="navbar-brand" href="{{ site.url }}{{ site.baseurl }}/"><img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ page.with_logo }}" height="32" alt="{{ site.title }}" />{% if page.with_manifestation != "" %}<span class="manifestation border-start border-light ps-3 ms-3 py-2 fs-6">{{ page.with_manifestation }}</span>{% endif %}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav ms-auto">
        {% assign navitems = navbar | where: "visible_on", "navbar" -%}
        {% for navitem in navitems -%}
        {% if navitem.menu.size == 0 -%}
        <li class="nav-item">
          <a class="nav-link" role="presentation" href="{{ site.url }}{{ site.baseurl }}{{ navitem.link }}"><i class="{{ navitem.icon }}"></i> {{ navitem.name }}</a>
        </li>
        {% else -%}
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="{{ navitem.icon }}"></i> {{ navitem.name }}</a>
          <ul class="dropdown-menu dropdown-menu-dark shadow" aria-labelledby="navbarDropdown-{{ forloop.index }}">
            {% for dropdownitem in navitem.menu -%}
            <li><a class="dropdown-item" role="presentation" href="{{ site.url }}{{ site.baseurl }}{{ dropdownitem.link }}">{{ dropdownitem.name }}</a></li>
            {% endfor -%}
          </ul>
        </li>
        {% endif -%}
        {% endfor -%}
      </ul>
    </div>

  </div>
</nav>