<nav id="sidebar" class="sidebar nav-collapse collapse">
    <ul id="side-nav" class="side-nav">
        <li class="{{conditionClass "active" active "index"}}">
            <a href="index.html"><i class="fa fa-home"></i> <span class="name">Dashboard</span></a>
        </li>
        <li class="{{conditionClass "active" active "typography"}}">
            <a href="typography.html"><i class="fa fa-font"></i> Typography</a></li>
        </li>
        <li class="{{conditionClass "active" active "tables"}}">
            <a href="tables.html"><i class="fa fa-table"></i> Tables</a></li>
        </li>
        <li class="{{conditionClass "active" active "notifications"}}">
            <a href="notifications.html"><i class="fa fa-bell"></i> Notifications</a></li>
        </li>
        <li class="panel {{conditionClass "active" active "stat_charts ui_icons maps"}}">
            <a class="accordion-toggle {{conditionClass "collapsed" active "stat_charts ui_icons maps" true}}" data-toggle="collapse"
               data-parent="#side-nav" href="#elements-collapse"><i class="fa fa-magic"></i> <span class="name">Elements</span></a>
            <ul id="elements-collapse" class="panel-collapse collapse {{conditionClass "in" active "stat_charts ui_icons maps"}}">
                <li class="{{conditionClass "active" active "charts"}}"><a href="charts.html">Charts</a></li>
                <li class="{{conditionClass "active" active "icons"}}"><a href="icons.html">Icons</a></li>
                <li class="{{conditionClass "active" active "maps"}}"><a href="maps.html" data-no-pjax>Maps</a></li>
            </ul>
        </li>
    </ul>

    <h5 class="sidebar-nav-title">Labels <a class="action-link" href="#"><i class="glyphicon glyphicon-plus"></i></a></h5>
    <!-- some styled links in sidebar. ready to use as links to email folders, projects, groups, etc -->
    <ul class="sidebar-labels">
        <li>
            <a href="#">
                <!-- yep, .circle again -->
                <i class="fa fa-circle text-success"></i>
                <span class="label-name">My Recent</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-circle text-primary"></i>
                <span class="label-name">Starred</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-circle text-danger"></i>
                <span class="label-name">Background</span>
            </a>
        </li>
    </ul>

    <h5 class="sidebar-nav-title">Projects</h5>
    <!-- A place for sidebar notifications & alerts -->
    <div class="sidebar-alerts">
        <div class="alert fade in">
            <a href="#" class="close" data-dismiss="alert" aria-hidden="true">&times;</a>
            <span class="text-white fw-semi-bold">Sales Report</span> <br>
            <div class="progress progress-xs mt-xs mb-0">
                <div class="progress-bar progress-bar-gray-light" style="width: 16%"></div>
            </div>
            <small>Calculating x-axis bias... 65%</small>
        </div>
        <div class="alert fade in">
            <a href="#" class="close" data-dismiss="alert" aria-hidden="true">&times;</a>
            <span class="text-white fw-semi-bold">Personal Responsibility</span> <br>
            <div class="progress progress-xs mt-xs mb-0">
                <div class="progress-bar progress-bar-danger" style="width: 23%"></div>
            </div>
            <small>Provide required notes</small>
        </div>
    </div>
</nav>
