None Required. Included in Core
None Required. Included in Core
Copy
<!-- Start: Sidebar Left -->
<aside id="sidebar_left" class="nano nano-primary">
<!-- Start: Sidebar Left Content -->
<div class="sidebar-left-content nano-content">
<!-- Start: Sidebar Header -->
<header class="sidebar-header">
<div class="user-menu">
<div class="row text-center mbn">
<div class="col-xs-4">
<a href="home.html" class="text-primary" data-toggle="tooltip" data-placement="top" title="Home">
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<div class="col-xs-4">
<a href="pages_messages.html" class="text-info" data-toggle="tooltip" data-placement="top" title="Messages">
<span class="glyphicon glyphicon-inbox"></span>
</a>
</div>
<div class="col-xs-4">
<a href="pages_profile.html" class="text-alert" data-toggle="tooltip" data-placement="top" title="Tasks">
<span class="glyphicon glyphicon-bell"></span>
</a>
</div>
<div class="col-xs-4">
<a href="pages_timeline.html" class="text-system" data-toggle="tooltip" data-placement="top" title="Activity">
<span class="fa fa-desktop"></span>
</a>
</div>
<div class="col-xs-4">
<a href="pages_profile.html" class="text-danger" data-toggle="tooltip" data-placement="top" title="Settings">
<span class="fa fa-gears"></span>
</a>
</div>
<div class="col-xs-4">
<a href="pages_gallery.html" class="text-warning" data-toggle="tooltip" data-placement="top" title="Cron Jobs">
<span class="fa fa-flask"></span>
</a>
</div>
</div>
</div>
</header>
<!-- End: Sidebar Header -->
<!-- Start: Sidebar Left Menu -->
<ul class="nav sidebar-menu">
<li class="sidebar-label pt20">Menu Items</li>
<li>
<a href="pages_calendar.html">
<span class="fa fa-calendar"></span>
<span class="sidebar-title">Default Item</span>
</a>
</li>
<li class="active">
<a href="home.html">
<span class="glyphicon glyphicon-home"></span>
<span class="sidebar-title">Active Item</span>
</a>
</li>
<li class="sidebar-label pt20">Item with Label</li>
<li>
<a href="pages_calendar.html">
<span class="fa fa-calendar"></span>
<span class="sidebar-title"> Item + Label</span>
<span class="sidebar-title-tray">
<span class="label label-xs bg-primary">New</span>
</span>
</a>
</li>
<li class="sidebar-label pt20">Item with Submenu</li>
<li>
<a class="accordion-toggle" href="#">
<span class="glyphicon glyphicon-check"></span>
<span class="sidebar-title">Dropdown Item</span>
<span class="caret"></span>
</a>
<ul class="nav sub-nav">
<li>
<a href="#">
<span class="glyphicon glyphicon-check"></span> Sub-Item 1 </a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-check"></span> Sub-Item 2 </a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-check"></span> Sub-Item 3 </a>
</li>
</ul>
</li>
<!-- sidebar bullets -->
<li class="sidebar-label pt20">Project Item</li>
<li class="sidebar-proj">
<a href="#projectOne">
<span class="fa fa-dot-circle-o text-primary"></span>
<span class="sidebar-title">Website Redesign</span>
</a>
</li>
<li class="sidebar-proj">
<a href="#projectTwo">
<span class="fa fa-dot-circle-o text-info"></span>
<span class="sidebar-title">Ecommerce Panel</span>
</a>
</li>
<!-- sidebar progress bars -->
<li class="sidebar-label pt25 pb10">Stat Item</li>
<li class="sidebar-stat mb10">
<a href="#projectOne" class="fs11">
<span class="fa fa-inbox text-info"></span>
<span class="sidebar-title text-muted">Email Storage</span>
<span class="pull-right mr20 text-muted">35%</span>
<div class="progress progress-bar-xs ml20 mr20">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 35%">
<span class="sr-only">35% Complete</span>
</div>
</div>
</a>
</li>
</ul>
<!-- End: Sidebar Menu -->
<!-- Start: Sidebar Collapse Button -->
<div class="sidebar-toggle-mini">
<a href="#">
<span class="fa fa-sign-out"></span>
</a>
</div>
<!-- End: Sidebar Collapse Button -->
</div>
<!-- End: Sidebar Left Content -->
</aside>
<!-- End: Sidebar Left -->
Copy
// Init AdminPanels on columns inside the ".admin-panels" container
$('.admin-panels').adminpanel({
grid: '.admin-grid',
draggable: true,
// On AdminPanel Init complete we fade in the content. Optional
onFinish: function() {
$('.admin-panels').addClass('animated fadeIn').removeClass('fade-onload');
},
// We trigger a window resize after a panel has been modified. This helps catch
// any plugins which may need to update after the panel was changed. Optional
onSave: function() {
$(window).trigger('resize');
}
});