tabler/pages/_includes/parts/navbar.html

{% assign person = include.person | default: 12 %}
{% assign person = site.data.people | where: "id", include.person %}
{% assign person = person[0] %}

<div class="container{% if include.fluid %}-fluid{% endif %}">
   <a class="navbar-toggler" data-toggle="modal" data-target="#aside">
      <span class="navbar-toggler-icon"></span>
   </a>

   <a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
      {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
      {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
      {% if include.logo %}
         <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
         <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
      {% endif %}
      {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
   </a>

   {% if include.plus-left %}
   <a href="#" class="btn btn-primary">
      {% include ui/icon.html icon="plus" %}
   </a>
   {% endif %}

   <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
      {% if include.fullscreen %}
      <li class="nav-item d-none d-sm-block">
         <a class="nav-link px-2" data-toggle="fullscreen" data-title="Fullscreen">
            {% include ui/icon.html icon="maximize" %}
         </a>
      </li>
      {% endif %}

      {% if include.customize %}
      <li class="nav-item dropdown">
         <a class="nav-link px-2" data-toggle="dropdown">
            {% include ui/icon.html icon="droplet" %}
            <span class="badge badge-pill badge-up bg-success"></span>
         </a>
      </li>
      {% endif %}

      {% if include.notifications %}
      <!-- Notification -->
      <li class="nav-item dropdown">
         <a class="nav-link px-2" data-toggle="dropdown">
            {% include ui/icon.html icon="bell" %}
            <span class="badge badge-pill badge-up bg-primary">4</span>
         </a>
         <div class="dropdown-menu dropdown-menu-right mt-3 p-0">
            <div class="scrollable">
               <div class="list list-row">
               </div>
            </div>
            <div class="d-flex px-3 py-2 b-t">
               <div class="flex">
                  <span>6 Notifications</span>
               </div>
               <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
            </div>
         </div>
      </li>
      {% endif %}

      {% if include.progress %}
      <li class="nav-item">
         <a href="#" class="nav-link text-muted">
            Profile Completeness: 70%
         </a>
      </li>
      {% endif %}

      {% if include.language %}
      <li class="nav-item dropdown">
         <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
            <span class="flag flag-gb mr-2"></span>English
         </a>
         <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
            {% for language in site.data.languages %}
            <a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
               language.name }}</a>
            {% endfor %}
         </div>
      </li>
      {% endif %}

      <li class="nav-item d-none d-lg-flex mr-3">
         <a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
      </li>

      {% if include.user-menu %}
      <li class="nav-item dropdown">
         <a href="#" data-toggle="dropdown"
            class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
            {% if include.user-menu == 1 %}
            {% include ui/avatar.html src=person.photo %}
            <span class="ml-2 d-none d-lg-block leading-none">
                  <span>{{ person.full_name }}</span>
                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
               </span>
            {% elsif include.user-menu == 2 %}
            <span class="mx-2 d-none leading-none d-lg-block text-right">
                    <span class="text-body">{{ person.full_name }}</span>
                </span>
            {% include ui/avatar.html src=person.photo %}
            {% elsif include.user-menu == 3 %}
            {% include ui/avatar.html src=person.photo %}
            {% elsif include.user-menu == 4 %}
            <span class="btn btn-secondary">{% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }}</span>
            {% endif %}
         </a>
         <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
            <a class="dropdown-item" href="#">
               {% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
            </a>
            <a class="dropdown-item" href="#">
               {% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
            </a>
            <a class="dropdown-item" href="#">
               <span class="float-right"><span class="badge badge-primary">6</span></span>
               {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
            </a>
            <a class="dropdown-item" href="#">
               {% include ui/icon.html icon="send" class="dropdown-icon" %} Message
            </a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">
               {% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
            </a>
            <a class="dropdown-item" href="#">
               {% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
            </a>
         </div>
      </li>
      {% endif %}

      {% if include.manage %}
      <li class="nav-item">
         <a href="#" class="btn btn-secondary">Manage Widgets</a>
      </li>
      {% endif %}

      {% if include.register %}
      <li class="nav-item ">
         <a href="#" class="nav-link">
            Sign in
         </a>
      </li>
      <li class="d-flex align-items-center">
         <a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
            Register
         </a>
      </li>
      {% endif %}

      {% if include.plus %}
      <li class="nav-item">
         <a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
      </li>
      {% endif %}

      {% if include.premium %}
      <li class="nav-item">
         <a href="#" class="btn btn-success">Go Premium</a>
      </li>
      {% endif %}

      {% if include.sync %}
      <li class="nav-item">
         <a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
      </li>
      {% endif %}
   </ul>
</div>