sleek-dashboard/src/_includes/base/left-sidebar.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

        <!--
          ====================================
          ——— LEFT SIDEBAR WITH FOOTER
          =====================================
        -->
        <aside class="left-sidebar bg-sidebar">
          <div id="sidebar" class="sidebar sidebar-with-footer">
            <!-- Aplication Brand -->
            <div class="app-brand">
              <a href="/index.html" title="Sleek Dashboard">
                <svg
                  class="brand-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  preserveAspectRatio="xMidYMid"
                  width="30"
                  height="33"
                  viewBox="0 0 30 33"
                >
                  <g fill="none" fill-rule="evenodd">
                    <path
                      class="logo-fill-blue"
                      fill="#7DBCFF"
                      d="M0 4v25l8 4V0zM22 4v25l8 4V0z"
                    />
                    <path class="logo-fill-white" fill="#FFF" d="M11 4v25l8 4V0z" />
                  </g>
                </svg>
                <span class="brand-name text-truncate">Sleek Dashboard</span>
              </a>
            </div>
            <!-- begin sidebar scrollbar -->
            <div class="sidebar-scrollbar">

              <!-- sidebar menu -->
              <ul class="nav sidebar-inner" id="sidebar-menu">
                {% for item in site.data.sidenavItems %}

                {% if item.type == "section-title" %}
                  <li class="{{item.type}}">
                    {{item.label}}
                  </li>
                {% else %}
                  <li {% if page.parent==item.name %} class="has-sub active expand" {% else %} class="has-sub" {% endif %}>
                    <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#{{item.name}}"
                      aria-expanded="false" aria-controls="{{item.name}}">
                      <i class="{{item.iconClass}}"></i>
                      <span class="nav-text">{{item.label}}</span> <b class="caret"></b>
                    </a>
                    <ul {% if page.parent==item.name %} class="collapse show" {% else %} class="collapse" {% endif %} id="{{item.name}}"
                      data-parent="#sidebar-menu">
                      <div class="sub-menu">
                        {% for itemInner in item.child %}
                        {% if itemInner.child == null %}
                          {% if itemInner.type == "section-title" %}
                            <li class="{{itemInner.type}}">
                              {{itemInner.label}}
                            </li>
                          {% else %}
                            <li {% if page.activePage==itemInner.name %} class="active" {% endif %}>
                              <a class="sidenav-item-link" href="{{itemInner.link}}">
                                <span class="nav-text">{{itemInner.label}}</span>
                                {% if itemInner.name == 'analytics' %}
                                <span class="badge badge-success">new</span>
                                {% endif %}
                              </a>
                            </li>
                          {% endif %}
                        {% else %}
                        <li {% if page.sub_parent==itemInner.name %} class="has-sub active expand" {% else %} class="has-sub" {% endif %}>
                          <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#{{itemInner.name}}"
                            aria-expanded="false" aria-controls="{{itemInner.name}}">
                            <span class="nav-text">{{itemInner.label}}</span> <b class="caret"></b>
                          </a>
                          <ul {% if page.sub_parent==itemInner.name %} class="collapse show" {% else %} class="collapse" {% endif %} id="{{itemInner.name}}">
                            <div class="sub-menu">
                              {% for itemInnermost in itemInner.child %}
                              <li {% if page.activePage==itemInnermost.name %} class="active" {% endif %}>
                                <a href="{{itemInnermost.link}}">{{itemInnermost.label}}</a>
                              </li>
                              {% endfor %}
                            </div>
                          </ul>
                        </li>
                        {% endif %}

                        {% endfor %}
                      </div>
                    </ul>
                  </li>
                {% endif %}

                {% endfor %}
              </ul>

            </div>

            <div class="sidebar-footer">
              <hr class="separator mb-0" />
              <div class="sidebar-footer-content">
                <h6 class="text-uppercase">
                  Cpu Uses <span class="float-right">40%</span>
                </h6>
                <div class="progress progress-xs">
                  <div
                    class="progress-bar active"
                    style="width: 40%;"
                    role="progressbar"
                  ></div>
                </div>
                <h6 class="text-uppercase">
                  Memory Uses <span class="float-right">65%</span>
                </h6>
                <div class="progress progress-xs">
                  <div
                    class="progress-bar progress-bar-warning"
                    style="width: 65%;"
                    role="progressbar"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </aside>