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

   <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>

   <ul class="nav navbar-menu align-items-center order-1 order-lg-2">

      {% if include.notifications %}
      <li class="nav-item dropdown mr-3">
         <a class="nav-link text-reset 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-arrow 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 %}

      <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-reset ml-2">
            {% include ui/avatar.html src=person.photo %}
            <span class="ml-2 d-none d-lg-block leading-none">
                  {{ person.full_name }}
                  <span class="text-muted d-block mt-1 text-h6">Administrator</span>
               </span>
         </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="#">
               {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
               <span class="badge bg-primary ml-auto">6</span>
            </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>