{% assign this_url = page.url | relative_url %}
{% assign home_url = '/' | relative_url %}

<div class="header">
  <!-- navbar -->
  <nav class="navbar-classic navbar navbar-expand-lg">
    {% if site.navbar_vertical %}
      <a id="nav-toggle" href="#"><i
          data-feather="menu"
          class="nav-icon me-2 icon-xs"></i></a>
    {% endif %}
     <ul class="navbar-nav navbar-right-wrap d-flex nav-top-wrap">
        <li class="nav-item mx-2">
          <a href="{{ '/' | relative_url }}" class="btn btn-outline-primary{% if home_url == this_url %}{{ " active" }}{% endif %}">
              <i class="nav-icon icon-xs" data-feather="home"></i>
              <span>Home</span>
          </a>
        </li> <!-- .nav-item -->
      {% for tab in site.tabs %}
      {% assign tab_url = tab.url | relative_url %}
        <li class="nav-item mx-2">
          <a href="{{ tab.url | relative_url }}" class="btn btn-outline-primary{% if tab_url == this_url %}{{ " active" }}{% endif %}">
            {% if tab.icon %}
              <i class="nav-icon icon-xs me-2" data-feather="{{ tab.icon }}"></i>
            {% endif %}
            {{ tab.title }}
          </a>
        </li> <!-- .nav-item -->
      {% endfor %}
    </ul>

    <ul class="navbar-nav navbar-right-wrap ms-auto d-flex nav-top-wrap">
      {% for entry in site.data.contact %}
        {% capture url %}
          {%- if entry.type == 'github' -%}
            https://github.com/{{ site.github.username }}
          {%- elsif entry.type == 'twitter' -%}
            https://twitter.com/{{ site.twitter.username }}
          {%- elsif entry.type == 'email' -%}
            {% assign email = site.social.email | split: '@' %}
            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
          {%- elsif entry.type == 'rss' -%}
            {{ "/feed.xml" | relative_url }}
          {%- else -%}
            {{ entry.url }}
          {%- endif -%}
        {% endcapture %}

        {% if url %}
        <li class="nav-item mx-2">
          <a href="{{ url }}" aria-label="{{ entry.type }}"
            {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
            {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
            <i class="nav-icon icon-xs me-2" data-feather="{{ entry.icon }}"></i>
          </a>
        </li>
        {% endif %}

      {% endfor %}
    </ul>
  </nav>
</div>