<nav id="sidebar-wrapper">
  <div class="sidebar-nav">
    <div class="tab" role="tabpanel">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item ">
            <a class="nav-link active" href="#live" role="tab" data-toggle="tab"><i class="fa fa-globe"></i> Live</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#trend" role="tab" data-toggle="tab"><i class="fa fa-rocket"></i> Trending</a>
          </li>
        </ul>
        <div class="tab-content tabs">
          <div role="tabpanel" class="tab-pane fade show active" id="live">
            <h3>Connect Live</h3>
            <div class="content newsf-list">
                <ul class="list-unstyled">
                    <li class="border border-primary">
                        <a rel="nofollow " href="#" class=" d-flex">
                            <div class="news-f-img"> <img src="img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div>
                            <div class="msg-body">
                                <h6 class="h5 msg-nav-h6">New Innovation world</h6>
                                <small>Tech soft is great innovation for...</small>
                            </div>
                        </a>
                    </li>
                    <li class="border border-success">
                        <a rel="nofollow" href="#" class=" d-flex">
                            <div class="news-f-img"> <img src="img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div>
                            <div class="msg-body">
                                <h6 class="h5 msg-nav-h6">Modified hand-cart</h6>
                                <small>The idea is to incorporate easy...</small>
                            </div>
                        </a>
                    </li>
                    <li class="border border-info">
                        <a rel="nofollow" href="#" class=" d-flex">
                            <div class="news-f-img"> <img src="img/avatar-4.jpg" alt="..." class="img-fluid rounded-circle"></div>
                            <div class="msg-body">
                                <h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>
                                <small>A dot matrix printer modified at...</small>
                            </div>
                        </a>
                    </li>
                    <li class="border border-primary">
                        <a rel="nofollow" href="#" class=" d-flex">
                            <div class="news-f-img"> <img src="img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
                            <div class="msg-body">
                                <h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>
                                <small>A dot matrix printer modified at...</small>
                            </div>
                        </a>
                    </li>
                    <li class="border border-success">
                        <a rel="nofollow" href="#" class=" d-flex">
                            <div class="news-f-img"> <img src="img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div>
                            <div class="msg-body">
                                <h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>
                                <small>A dot matrix printer modified at...</small>
                            </div>
                        </a>
                    </li>
                    <li class="border border-info">
                        <a rel="nofollow" href="#" class=" d-flex">
                            <div class="news-f-img"> <img src="img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div>
                            <div class="msg-body">
                                <h6 class="h5 msg-nav-h6">Low cost Modern printer</h6>
                                <small>A dot matrix printer modified at...</small>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="trend">
            <div class="card card-c2" style="box-shadow: 0 0 0;">
                <div class="header">
                    <h3 class="title">Trending Items</h3>
                    <p class="category">Last Campaign Performance</p>
                </div>
                <div class="content">
                    <canvas class="ct-chart" id="myChart-nav" height="250"></canvas>
                    <div class="footer">
                        <div class="legend">
                            <i class="fa fa-circle text-info"></i> Open
                            <i class="fa fa-circle text-danger"></i> Bounce
                            <i class="fa fa-circle text-warning"></i> Unsubscribe
                        </div>
                        <hr>
                        <div class="stats">
                            <i class="fa fa-clock-o"></i> Campaign sent 2 days ago
                        </div>
                    </div>
                </div>
            </div>
          </div>
       </div>
  </div>
</nav>
