<!-- nav-tabs -->
<ul class="site-sidebar-nav nav nav-tabs nav-justified nav-tabs-line" data-plugin="nav-tabs"
role="tablist">
  <li class="active" role="presentation">
    <a data-toggle="tab" href="#sidebar-userlist" role="tab">
      <i class="icon wb-chat" aria-hidden="true"></i>
    </a>
  </li>
  <li role="presentation">
    <a data-toggle="tab" href="#sidebar-activity" role="tab">
      <i class="icon wb-user" aria-hidden="true"></i>
    </a>
  </li>
  <li role="presentation">
    <a data-toggle="tab" href="#sidebar-setting" role="tab">
      <i class="icon wb-settings" aria-hidden="true"></i>
    </a>
  </li>
</ul>

<div class="site-sidebar-tab-content tab-content">
  <div class="tab-pane fade active in" id="sidebar-userlist">
    <div>
      <div>
        <h5 class="clearfix">FRIEND LIST
          <div class="pull-right">
            <a class="text-action" href="javascript:void(0)" role="button">
              <i class="icon wb-plus" aria-hidden="true"></i>
            </a>
            <a class="text-action" href="javascript:void(0)" role="button">
              <i class="icon wb-more-horizontal" aria-hidden="true"></i>
            </a>
          </div>
        </h5>
        <form class="margin-vertical-20" role="search">
          <div class="input-search input-search-dark">
            <i class="input-search-icon wb-search" aria-hidden="true"></i>
            <input type="text" class="form-control" id="inputSearch" name="search" placeholder="Search Pages">
            <button type="button" class="input-search-close icon wb-close" aria-label="Close"></button>
          </div>
        </form>

        <div class="list-group">
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-away">
                  <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Mary Adams</h4>
                <small>I am superman</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-busy">
                  <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Caleb Richards</h4>
                <small>I am tiger</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-online">
                  <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">June Lane</h4>
                <small>I am dog</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-off">
                  <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Edward Fletcher</h4>
                <small>I am kikty</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-busy">
                  <img src="https://randomuser.me/api/portraits/men/6.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Crystal Bates</h4>
                <small>I am cat</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-online">
                  <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Nathan Watts</h4>
                <small>I am monkey</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-online">
                  <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Heather Harper</h4>
                <small>I am snake</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-online">
                  <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Willard Wood</h4>
                <small>I am sheep</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-away">
                  <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Ronnie Ellis</h4>
                <small>I am lion</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-off">
                  <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Gwendolyn Wheeler</h4>
                <small>I am goldfish</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-busy">
                  <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Daniel Russell</h4>
                <small>I am rabbit</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-online">
                  <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Sarah Graves</h4>
                <small>I am dolphin</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-online">
                  <img src="https://randomuser.me/api/portraits/men/14.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Andrew Hoffman</h4>
                <small>I am horse</small>
              </div>
            </div>
          </a>
          <a class="list-group-item" href="javascript:void(0)" data-toggle="show-chat">
            <div class="media">
              <div class="media-left">
                <div class="avatar avatar-sm avatar-away">
                  <img src="https://randomuser.me/api/portraits/men/15.jpg" alt="..." />
                  <i></i>
                </div>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Camila Lynch</h4>
                <small>I am dragon</small>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="sidebar-activity">
    <div>
      <div>
        <h5>RECENT ACTIVITY</h5>
        <ul class="timeline timeline-icon timeline-single timeline-simple timeline-feed">
          <li class="timeline-item">
            <div class="timeline-dot bg-pink-600">
              <i class="icon wb-heart" aria-hidden="true"></i>
            </div>
            <div class="timeline-content">
              <small>
                <time datetime="2015-07-08">6 minutes ago</time>
              </small>
              <p>Melissa liked your activity Drinks At My Place.</p>
            </div>
          </li>
          <li class="timeline-item">
            <div class="timeline-dot bg-green-600">
              <i class="icon wb-check" aria-hidden="true"></i>
            </div>
            <div class="timeline-content">
              <small>
                <time datetime="2015-07-08">10 minutes ago</time>
              </small>
              <p>Tina is attending your activity Coffee @Starbucks</p>
            </div>
          </li>
          <li class="timeline-item">
            <div class="timeline-dot bg-green-600">
              <i class="icon wb-chat" aria-hidden="true"></i>
            </div>
            <div class="timeline-content">
              <small>
                <time datetime="2015-07-08">15 minutes ago</time>
              </small>
              <p>Melissa liked your activity Drinks At My Place.</p>
            </div>
          </li>
          <li class="timeline-item">
            <div class="timeline-dot">
              <i class="icon wb-plus" aria-hidden="true"></i>
            </div>
            <div class="timeline-content">
              <small>
                <time datetime="2015-07-08">20 minutes ago</time>
              </small>
              <p>Josh is now following you</p>
            </div>
          </li>
        </ul>

        <h5 class="margin-top-50">TASK STATISTICS</h5>
        <div class="contextual-progress">
          <div class="clearfix">
            <div class="progress-title">Features development</div>
            <div class="progress-label">70%</div>
          </div>
          <div class="progress" data-goal="70" data-plugin="progress">
            <div class="progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"
            style="width: 70%" role="progressbar">
              <span class="progress-label"></span>
            </div>
          </div>
        </div>
        <div class="contextual-progress">
          <div class="clearfix">
            <div class="progress-title">Uploading files</div>
            <div class="progress-label">30%</div>
          </div>
          <div class="progress" data-goal="60" data-plugin="progress">
            <div class="progress-bar progress-bar-success" aria-valuemin="0" aria-valuemax="100"
            aria-valuenow="30" style="width: 30%" role="progressbar">
              <span class="progress-label"></span>
            </div>
          </div>
        </div>
        <div class="contextual-progress">
          <div class="clearfix">
            <div class="progress-title">Traffc Margins</div>
            <div class="progress-label">90%</div>
          </div>
          <div class="progress" data-goal="60" data-plugin="progress">
            <div class="progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="90"
            style="width: 90%" role="progressbar">
              <span class="progress-label"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="sidebar-setting">
    <div>
      <div>
        <h5>GENERAL SETTINGS</h5>
        <ul class="list-group">
          <li class="list-group-item">
            <div class="pull-right margin-top-5">
              <input type="checkbox" class="js-switch-small" data-plugin="switchery" data-size="small"
              checked />
            </div>
            <h5>Notifications</h5>
            <p>Our very own image-less pure CSS and retina compatible check box.</p>
          </li>
          <li class="list-group-item">
            <div class="pull-right margin-top-5">
              <input type="checkbox" class="js-switch-small" data-plugin="switchery" data-size="small"
              checked />
            </div>
            <h5>Show your emails</h5>
            <p>Our very own image-less pure CSS and retina .</p>
          </li>
          <li class="list-group-item">
            <div class="pull-right margin-top-5">
              <input type="checkbox" class="js-switch-small" data-plugin="switchery" data-size="small"
              checked />
            </div>
            <h5>Show recent activity</h5>
            <p>Our very own image-less pure CSS and retina compatible check box.</p>
          </li>
          <li class="list-group-item">
            <div class="pull-right margin-top-5">
              <input type="checkbox" class="js-switch-small" data-plugin="switchery" data-size="small"
              checked />
            </div>
            <h5>Show Task statistics</h5>
            <p>Our very own image-less pure CSS and retina .</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="conversation" class="conversation">
  <div class="conversation-header">
    <a class="conversation-more pull-right" href="javascript:void(0)">
      <i class="icon wb-more-horizontal" aria-hidden="true"></i>
    </a>
    <a class="conversation-return pull-left" href="javascript:void(0)" data-toggle="close-chat">
      <i class="icon wb-chevron-left" aria-hidden="true"></i>
    </a>
    <div class="conversation-title">Mike</div>
  </div>
  <div class="chats">
    <div class="chat chat-left">
      <div class="chat-avatar">
        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="Edward Fletcher">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Edward Fletcher">
        </a>
      </div>
      <div class="chat-body">
        <div class="chat-content">
          <p>
            I'm just looking around.
          </p>
          <p>Will you tell me something about yourself? </p>
          <time class="chat-time" datetime="2015-06-01T08:35">8:35 am</time>
        </div>
        <div class="chat-content">
          <p>
            Are you there? That time!
          </p>
          <time class="chat-time" datetime="2015-06-01T08:40">8:40 am</time>
        </div>
      </div>
    </div>
    <div class="chat">
      <div class="chat-avatar">
        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="June Lane">
        </a>
      </div>
      <div class="chat-body">
        <div class="chat-content">
          <p>
            Hello. What can I do for you?
          </p>
          <time class="chat-time" datetime="2015-06-01T08:30">8:30 am</time>
        </div>
      </div>
    </div>
  </div>
</div>