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.
81 lines (78 loc) • 3.26 kB
HTML
{% if page.notification-drawer %}
{% include widgets/layouts/nav-vertical-notification-drawer.html %}
{% else %}
{% include widgets/layouts/navbar-vertical.html %}
{% endif %}
<div class="nav-pf-vertical
{% if page.submenus %}nav-pf-vertical-with-sub-menus{% endif %}
{% if page.persistent-secondary %}nav-pf-persistent-secondary{% endif %}
{% if page.collapsible-menus %}nav-pf-vertical-collapsible-menus{% endif %}
{% if page.hide-icons %}hidden-icons-pf{% endif %}
{% if page.nav-badges %}nav-pf-vertical-with-badges{% endif %}">
<ul class="list-group">
<li class="list-group-item">
<a>
<span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
<span class="list-group-item-value">Dashboard</span>
</a>
</li>
<li class="list-group-item">
<a>
<span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
<span class="list-group-item-value">Dolor</span>
{% if page.nav-badges %}
<div class="badge-container-pf">
<span class="badge">1283</span>
</div>
{% endif %}
</a>
</li>
<li class="list-group-item active {% if page.submenus %}secondary-nav-item-pf{% endif %}" data-target="#ipsum-secondary">
<a>
<span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
<span class="list-group-item-value">Ipsum</span>
</a>
{% if page.submenus %}
{% include widgets/navigation/secondary-nav-ipsum.html %}
{% endif %}
</li>
<li class="list-group-item {% if page.submenus %}secondary-nav-item-pf{% endif %}" data-target="#amet-secondary">
<a>
<span class="fa fa-paper-plane" data-toggle="tooltip" title="Amet"></span>
<span class="list-group-item-value">Amet</span>
</a>
{% if page.submenus %}
{% include widgets/navigation/secondary-nav-amet.html %}
{% endif %}
</li>
<li class="list-group-item">
<a>
<span class="fa fa-graduation-cap" data-toggle="tooltip" title="Adipscing"></span>
<span class="list-group-item-value">Adipscing</span>
</a>
</li>
<li class="list-group-item">
<a>
<span class="fa fa-gamepad" data-toggle="tooltip" title="Lorem"></span>
<span class="list-group-item-value">Lorem</span>
</a>
</li>
</ul>
</div>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
{% if page.persistent-secondary %}nav-pf-persistent-secondary{% endif %}
{% if page.nav-badges %}nav-pf-vertical-with-badges{% endif %}
{% if page.hide-icons == true %}hidden-icons-pf{% endif %}">
{% include widgets/layouts/cards-alt.html %}
</div>
<script>
$(document).ready(function() {
// matchHeight the contents of each .card-pf and then the .card-pf itself
$(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
// Initialize the vertical navigation
$().setupVerticalNavigation(true);
});
</script>