<nav class="navbar navbar-pf-vertical">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="/" class="navbar-brand">
      {% if site.navbar-pf-navbar-brand-icon %}<img class="navbar-brand-icon" src="{{site.navbar-logo-alt-icon}}" alt=""/>{% endif %}<img class="navbar-brand-name" src="{{site.navbar-brand-alt-icon}}" alt="{{site.title-product}}" />
    </a>
  </div>
  <nav class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#" target="_blank" class="nav-item-iconic nav-item-iconic-new-window"><span title="Launch" class="fa fa-external-link"></span></a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right navbar-iconic">
      <li class="drawer-pf-trigger dropdown">
        <a class="nav-item-iconic drawer-pf-trigger-icon">
          <span class="fa fa-bell" title="Notifications"></span><!-- In case of all notifications read, the icon should be fa-bell-o -->
        </a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span title="Help" class="fa pficon-help"></span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Help</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span title="Username" class="fa pficon-user"></span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <li><a href="#">Preferences</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </li>
    </ul>
    <div class="drawer-pf hide drawer-pf-notifications-non-clickable">
      <div class="drawer-pf-title">
        <h3 class="text-center">Notifications Drawer</h3>
      </div>
      <div class="panel-group" id="notification-drawer-accordion">
        <div class="panel panel-default">
          <div class="panel-heading" data-component="collapse-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseOne">
                Notification Tab 1
              </a>
            </h4>
            <span class="panel-counter">5 New Events</span>
          </div>
          <div id="fixedCollapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
              {% include widgets/notifications-drawer-notifications.html %}
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-component="collapse-heading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseTwo">
                Notification Tab 2
              </a>
            </h4>
            <span class="panel-counter">5 New Events</span>
          </div>
          <div id="fixedCollapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              {% include widgets/notifications-drawer-notifications.html %}
              {% include widgets/notifications-drawer-notifications.html %}
              {% include widgets/notifications-drawer-notifications.html %}
              <div class="drawer-pf-loading text-center">
                <span class="spinner spinner-xs spinner-inline"></span> Loading More
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-component="collapse-heading">
            <h4 class="panel-title">
              <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseThree">
                Notification Tab 3
              </a>
            </h4>
            <span class="panel-counter">5 New Events</span>
          </div>
          <div id="fixedCollapseThree" class="panel-collapse collapse">
            <div class="panel-body">
              {% include widgets/notifications-drawer-notifications.html %}
              {% include widgets/notifications-drawer-notifications.html %}
              {% include widgets/notifications-drawer-notifications.html %}
            </div>
          </div>
        </div>
      </div>
      <div class="drawer-pf-action">
        <button class="btn btn-link">Mark All Read</button>
      </div>
    </div>
  </nav>
</nav> <!--/.navbar-->
<script>
  $(document).ready(function() {
    // Show/Hide Notifications Drawer
    $('.drawer-pf-trigger').click(function() {
      var $drawer = $('.drawer-pf');

      $(this).toggleClass('open');
      if ($drawer.hasClass('hide')) {
        $drawer.removeClass('hide');
          $('#notification-drawer-accordion').initCollapseHeights();
      } else {
        $drawer.addClass('hide');
      }
    });
    // Mark All Read
    $('.drawer-pf-action .btn').click(function() {
      $('.drawer-pf').find('.unread').removeClass('unread');
    });

    $('#notification-drawer-accordion').initCollapseHeights();
  });
</script>