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 %}{% if include.dark %} navbar-dark bg-dark{% endif %}">
   <a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
      {% include ui/icon.html icon="menu" %}
   </a>


   <a href="{{ site.base }}" class="navbar-brand text-inherit">
      {% 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.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% 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 %}


   <div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler">
      {% if include.big-menu %}
      <ul class="navbar-nav">
         <li class="nav-item">
            <a class="nav-link" href="#">Homepage</a>
         </li>

         <li class="nav-item dropdown">
            <div class="dropdown">
               <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages</a>
               <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">App Pages</a>
                  <a class="dropdown-item" href="#">Utility Pages</a>
                  <a class="dropdown-item" href="#">Layouts</a>
               </div>
            </div>
         </li>

         <li class="nav-item">
            <div class="dropdown">
               <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Components</a>
               <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Bootstrap</a>
                  <a class="dropdown-item" href="#">Pipeline</a>
               </div>
            </div>
         </li>

         <li class="nav-item">
            <a class="nav-link" href="#">Documentation</a>
         </li>

         <li class="nav-item">
            <a class="nav-link" href="#">Changelog</a>
         </li>
      </ul>
      {% endif %}

      {% if include.search %}
      <!-- Navbar Search -->
      <form class="input-group m-2 my-lg-0 ">
                <span class="input-group-prepend">
                    <button type="button"
                            class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
                </span>
         <input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
                data-plugin="typeahead">
      </form>
      {% endif %}
   </div>

   <ul class="nav navbar-menu 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-light">
            Profile Completeness: 70%
            <!--<span class="progress progress-xs">-->
            <!--<span class="progress-bar" style="width: 70%"></span>-->
            <!--</span>-->
         </a>
      </li>
      {% endif %}

      {% 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-default">{{ 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 %}

      {% 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 %}
   </ul>
</div>