patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
147 lines (144 loc) • 6.2 kB
HTML
<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 class="drawer-pf-action">
<button class="btn btn-link btn-block"">Mark All Read</button>
</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 class="drawer-pf-action">
<button class="btn btn-link btn-block"">Mark All Read</button>
</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 class="drawer-pf-action">
<button class="btn btn-link btn-block"">Mark All Read</button>
</div>
</div>
</div>
</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');
setTimeout(function () {
if (window.dispatchEvent) {
window.dispatchEvent(new Event('resize'));
}
// Special case for IE
if ($(document).fireEvent) {
$(document).fireEvent('onresize');
}
}, 100);
} else {
$drawer.addClass('hide');
}
});
// Mark All Read
$('.panel-collapse').each(function (index, panel) {
var $panel = $(panel);
$panel.on('click', '.drawer-pf-action .btn', function() {
$panel.find('.unread').removeClass('unread');
});
});
$('#notification-drawer-accordion').initCollapseHeights('.panel-body');
});
</script>