<!-- SIDE PANEL -->
<div id="side-panel" class="side-panel">
    <div class="panel-header">
        <h4 class="panel-title">Friends</h4>
    </div>
    <div class="scrollable-container">
        <div class="media-group">
            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/221.jpg" alt="">
                            <i class="status status-online"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">John Doe</h5>
                        <small class="media-meta">active now</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/205.jpg" alt="">
                            <i class="status status-online"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">John Doe</h5>
                        <small class="media-meta">active now</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/206.jpg" alt="">
                            <i class="status status-online"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Adam Kiti</h5>
                        <small class="media-meta">active now</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/207.jpg" alt="">
                            <i class="status status-away"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Jane Doe</h5>
                        <small class="media-meta">away</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/208.jpg" alt="">
                            <i class="status status-away"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Sara Adams</h5>
                        <small class="media-meta">away</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/209.jpg" alt="">
                            <i class="status status-away"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Smith Doe</h5>
                        <small class="media-meta">away</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/219.jpg" alt="">
                            <i class="status status-away"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Dana Dyab</h5>
                        <small class="media-meta">away</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/210.jpg" alt="">
                            <i class="status status-offline"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Jeffry Way</h5>
                        <small class="media-meta">2 hours ago</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/211.jpg" alt="">
                            <i class="status status-offline"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Jane Doe</h5>
                        <small class="media-meta">5 hours ago</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/212.jpg" alt="">
                            <i class="status status-offline"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Adam Khoury</h5>
                        <small class="media-meta">22 minutes ago</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/207.jpg" alt="">
                            <i class="status status-offline"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Sara Smith</h5>
                        <small class="media-meta">2 days ago</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->

            <a href="javascript:void(0)" class="media-group-item">
                <div class="media">
                    <div class="media-left">
                        <div class="avatar avatar-xs avatar-circle">
                            <img src="../assets/images/211.jpg" alt="">
                            <i class="status status-offline"></i>
                        </div>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">Donia Dyab</h5>
                        <small class="media-meta">3 days ago</small>
                    </div>
                </div>
            </a><!-- .media-group-item -->
        </div>
    </div><!-- .scrollable-container -->
</div><!-- /#side-panel -->
