djLint/tests/jinja_adminlte/includes/sidebar.html

<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/" class="brand-link">
        <img src="/static/assets/img/AdminLTELogo.png"
             alt="AdminLTE Logo"
             class="brand-image img-circle elevation-3"
             style="opacity: .8">
            <span class="brand-text font-weight-light">
                AdminLTE 3
            </span>
        </a>
        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="/static/assets/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <a href="#" class="d-block">Alexander Pierce</a>
                    </div>
                </div>
                <!-- SidebarSearch Form -->
                <div class="form-inline">
                    <div class="input-group" data-widget="sidebar-search">
                        <input class="form-control form-control-sidebar"
                               type="search"
                               placeholder="Search"
                               aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-sidebar">
                                <i class="fas fa-search fa-fw"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column"
                        data-widget="treeview"
                        role="menu"
                        data-accordion="false">
                        <!-- Add icons to the links using the .nav-icon class
                    with font-awesome or any other icon font library -->
                    <li class="nav-item has-treeview {% if 'index' in segment %}menu-open {% endif %}">
                    <a href="#" class="nav-link {% if 'index' in segment %}active {% endif %}">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                        Dashboard
                        <i class="right fas fa-angle-left"></i>
                    </p>
                </a>
                <ul class="nav nav-treeview">
                    <li class="nav-item">
                        <a href="/index.html" class="nav-link {% if 'index.html' in segment %}active {% endif %}">
                        <i class="far fa-circle nav-icon"></i>
                        <p>
                            Dashboard v1
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/index2.html" class="nav-link {% if 'index2.html' in segment %}active {% endif %}">
                    <i class="far fa-circle nav-icon"></i>
                    <p>
                        Dashboard v2
                    </p>
                </a>
            </li>
            <li class="nav-item">
                <a href="/index3.html" class="nav-link {% if 'index3.html' in segment %}active {% endif %}">
                <i class="far fa-circle nav-icon"></i>
                <p>
                    Dashboard v3
                </p>
            </a>
        </li>
    </ul>
</li>
<li class="nav-item">
    <a href="widgets.html" class="nav-link {% if 'widgets' in segment %}active {% endif %}">
    <i class="nav-icon fas fa-th"></i>
    <p>
        Widgets
        <span class="right badge badge-danger">
            New
        </span>
    </p>
</a>
</li>
<li class="nav-item has-treeview {% if 'layout' in segment %}menu-open {% endif %}">
<a href="#" class="nav-link {% if 'layout' in segment %}active {% endif %}">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/layout-top-nav-sidebar.html" class="nav-link {% if 'layout-top' in segment %}active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
    Top Navigation + Sidebar
</p>
</a>
</li>
<li class="nav-item">
<a href="/layout-boxed.html" class="nav-link {% if 'layout-boxed' in segment %}active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Boxed
</p>
</a>
</li>
<li class="nav-item">
<a href="/layout-fixed-sidebar.html" class="nav-link {% if 'layout-fixed-sidebar' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Fixed Sidebar
</p>
</a>
</li>
<li class="nav-item">
<a href="/layout-fixed-topnav.html" class="nav-link {% if 'layout-fixed-topnav' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Fixed Navbar
</p>
</a>
</li>
<li class="nav-item">
<a href="/layout-fixed-footer.html" class="nav-link {% if 'layout-fixed-footer' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Fixed Footer
</p>
</a>
</li>
<li class="nav-item">
<a href="/layout-collapsed-sidebar.html" class="nav-link {% if 'layout-collapsed' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Collapsed Sidebar
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview {% if 'charts' in segment %} menu-open {% endif %}">
<a href="#" class="nav-link {% if 'charts' in segment %} active {% endif %}">
<i class="nav-icon fas fa-chart-pie"></i>
<p>
Charts
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/charts-chartjs.html" class="nav-link {% if 'charts-chartjs' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
ChartJS
</p>
</a>
</li>
<li class="nav-item">
<a href="/charts-flot.html" class="nav-link {% if 'charts-flot' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Flot
</p>
</a>
</li>
<li class="nav-item">
<a href="/charts-inline.html" class="nav-link {% if 'charts-inline' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Inline
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview {% if 'ui-' in segment %} menu-open {% endif %}">
<a href="#" class="nav-link {% if 'ui-' in segment %} active {% endif %}">
<i class="nav-icon fas fa-tree"></i>
<p>
UI Elements
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/ui-general.html" class="nav-link {% if 'ui-general' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
General
</p>
</a>
</li>
<li class="nav-item">
<a href="/ui-icons.html" class="nav-link {% if 'ui-icons' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Icons
</p>
</a>
</li>
<li class="nav-item">
<a href="/ui-buttons.html" class="nav-link {% if 'ui-buttons' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Buttons
</p>
</a>
</li>
<li class="nav-item">
<a href="/ui-sliders.html" class="nav-link {% if 'ui-sliders' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Sliders
</p>
</a>
</li>
<li class="nav-item">
<a href="/ui-modals.html" class="nav-link {% if 'ui-modals' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Modals & Alerts
</p>
</a>
</li>
<li class="nav-item">
<a href="/ui-navbar.html" class="nav-link {% if 'ui-navbar' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Navbar & Tabs
</p>
</a>
</li>
<li class="nav-item">
<a href="/ui-timeline.html" class="nav-link {% if 'ui-timeline' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Timeline
</p>
</a>
</li>
<li class="nav-item">
<a href="/ui-ribbons.html" class="nav-link {% if 'ui-ribbons' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Ribbons
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview {% if 'forms-' in segment %} menu-open {% endif %}">
<a href="#" class="nav-link {% if 'forms-' in segment %} active {% endif %}">
<i class="nav-icon fas fa-edit"></i>
<p>
Forms
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/forms-general.html" class="nav-link {% if 'forms-general' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
General Elements
</p>
</a>
</li>
<li class="nav-item">
<a href="/forms-advanced.html" class="nav-link {% if 'forms-advanced' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Advanced Elements
</p>
</a>
</li>
<li class="nav-item">
<a href="/forms-editors.html" class="nav-link {% if 'forms-editors' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Editors
</p>
</a>
</li>
<li class="nav-item">
<a href="/forms-validation.html" class="nav-link {% if 'forms-validation' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Validation
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview {% if 'tables-' in segment %} menu-open {% endif %}">
<a href="#" class="nav-link {% if 'tables-' in segment %} active {% endif %}">
<i class="nav-icon fas fa-table"></i>
<p>
Tables
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/tables-simple.html" class="nav-link {% if 'tables-simple' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
Simple Tables
</p>
</a>
</li>
<li class="nav-item">
<a href="/tables-data.html" class="nav-link {% if 'tables-data' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
DataTables
</p>
</a>
</li>
<li class="nav-item">
<a href="/tables-jsgrid.html" class="nav-link {% if 'tables-jsgrid' in segment %} active {% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>
jsGrid
</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">
EXAMPLES
</li>
<li class="nav-item">
<a href="/calendar.html" class="nav-link">
<i class="nav-icon far fa-calendar-alt"></i>
<p>
Calendar
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item">
<a href="/gallery.html" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
Gallery
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-envelope"></i>
<p>
Mailbox
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/mailbox.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Inbox
</p>
</a>
</li>
<li class="nav-item">
<a href="/mailbox-compose.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Compose
</p>
</a>
</li>
<li class="nav-item">
<a href="/mailbox-read-mail.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Read
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p>
Pages
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/examples-invoice.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Invoice
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-profile.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Profile
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-e-commerce.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
E-commerce
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-projects.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Projects
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-project-add.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Project Add
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-project-edit.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Project Edit
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-project-detail.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Project Detail
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-contacts.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Contacts
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-plus-square"></i>
<p>
Extras
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/examples-login.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Login
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-register.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Register
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-forgot-password.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Forgot Password
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-recover-password.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Recover Password
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-lockscreen.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Lockscreen
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-legacy-user-menu.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Legacy User Menu
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-language-menu.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Language Menu
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-404.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Error 404
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-500.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Error 500
</p>
</a>
</li>
<li class="nav-item">
<a href="/examples-blank.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Blank Page
</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">
MISCELLANEOUS
</li>
<li class="nav-item">
<a target="_blank" rel="noopener noreferrer" href="https://adminlte.io/docs/3.0/" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>
UI Documentation
</p>
</a>
</li>
<li class="nav-header">
MULTI LEVEL EXAMPLE
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-circle nav-icon"></i>
<p>
Level 1
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i>
<p>
Level 1
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Level 2
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Level 2
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-dot-circle nav-icon"></i>
<p>
Level 3
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-dot-circle nav-icon"></i>
<p>
Level 3
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-dot-circle nav-icon"></i>
<p>
Level 3
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>
Level 2
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-circle nav-icon"></i>
<p>
Level 1
</p>
</a>
</li>
<li class="nav-header">
LABELS
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-danger"></i>
<p class="text">
Important
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-warning"></i>
<p>
Warning
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-info"></i>
<p>
Informational
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>