<h3 translate="offsidebar.chat.CONNECTIONS" class="text-center text-thin">Connections</h3>
<ul class="nav">
   <!-- START list title-->
   <li class="p">
      <small translate="offsidebar.chat.ONLINE" class="text-muted">ONLINE</small>
   </li>
   <!-- END list title-->
   <li>
      <!-- START User status-->
      <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-success circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="app/img/user/05.jpg" alt="Image" class="media-box-object img-circle thumb48" />
         </span>
         <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Juan Sims</strong>
               <br/>
               <small class="text-muted">Designeer</small>
            </span>
         </span>
      </a>
      <!-- END User status-->
      <!-- START User status-->
      <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-success circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="app/img/user/06.jpg" alt="Image" class="media-box-object img-circle thumb48" />
         </span>
         <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Maureen Jenkins</strong>
               <br/>
               <small class="text-muted">Designeer</small>
            </span>
         </span>
      </a>
      <!-- END User status-->
      <!-- START User status-->
      <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-danger circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="app/img/user/07.jpg" alt="Image" class="media-box-object img-circle thumb48" />
         </span>
         <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Billie Dunn</strong>
               <br/>
               <small class="text-muted">Designeer</small>
            </span>
         </span>
      </a>
      <!-- END User status-->
      <!-- START User status-->
      <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-warning circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="app/img/user/08.jpg" alt="Image" class="media-box-object img-circle thumb48" />
         </span>
         <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Tomothy Roberts</strong>
               <br/>
               <small class="text-muted">Designer</small>
            </span>
         </span>
      </a>
      <!-- END User status-->
   </li>
   <!-- START list title-->
   <li class="p">
      <small translate="offsidebar.chat.OFFLINE" class="text-muted">OFFLINE</small>
   </li>
   <!-- END list title-->
   <li>
      <!-- START User status-->
      <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="app/img/user/09.jpg" alt="Image" class="media-box-object img-circle thumb48" />
         </span>
         <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Lawrence Robinson</strong>
               <br/>
               <small class="text-muted">Developer</small>
            </span>
         </span>
      </a>
      <!-- END User status-->
      <!-- START User status-->
      <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="app/img/user/10.jpg" alt="Image" class="media-box-object img-circle thumb48" />
         </span>
         <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Tyrone Owens</strong>
               <br/>
               <small class="text-muted">Designer</small>
            </span>
         </span>
      </a>
      <!-- END User status-->
   </li>
   <li>
      <div class="p-lg text-center">
         <!-- Optional link to list more users-->
         <a href="#" title="See more contacts" class="btn btn-purple btn-sm">
            <strong translate="offsidebar.chat.LOAD_MORE">Load more..</strong>
         </a>
      </div>
   </li>
</ul>
<!-- Extra items-->
<div class="p">
   <p>
      <small translate="offsidebar.chat.TASK_COMPLETION" class="text-muted">Tasks completion</small>
   </p>
   <div class="progress progress-xs m0">
      <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-success progress-80">
         <span class="sr-only">80% Complete</span>
      </div>
   </div>
</div>
<div class="p">
   <p>
      <small translate="offsidebar.chat.QUOTA" class="text-muted">Upload quota</small>
   </p>
   <div class="progress progress-xs m0">
      <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-warning progress-40">
         <span class="sr-only">40% Complete</span>
      </div>
   </div>
</div>