<div class="hide_show animate">
  <!-- <img src="images/menu.png" alt="menu" /> -->
  <span class="icon-bar top"></span> <span class="icon-bar mid"></span> <span class="icon-bar btm"></span>
</div>
<div class="mobile_logo">
    <a href="dashboard.html"><img class="mb-1 mt-3" src="images/your-logo.png"></a>
  </div>
<div class="left left_panel animate">
  <div class="logo text-center">
    <a href="dashboard.html"><img class="mb-4 mt-4" src="images/your-logo.png" width="80"></a>
  </div>
  <div class="user-account mb-4">
    <div class="d-flex">
      <div class="user-img">JS</div>
      <div class="user-name">
        <div class="nav-item">
          <span class="semi-bold d-block">John Smith </span>
         <a class="v-sml-btn" href="index.html"> Logout </a>        
        </div>          
      </div>
    </div>
  </div>

  <div class="scrollable">
    <nav class="nav flex-column sidebar_nav">
        <a class="nav-link active" href="dashboard.html">Dashboard</a>
        <a class="nav-link" href="profile.html">Profile</a>
        <a class="nav-link" href="pay-dash.html">Payment Plan</a> 
        <a class="nav-link" href="accounts.html">Account History</a> 
        <a class="nav-link" href="statements.html">Statements</a>                
        <a class="nav-link" href="payment-history.html">Payment History</a>
        <a class="nav-link" href="common-questions.html">Common Questions</a>
    </nav>
    <div class="px-5">
      <p class="mt-5"><strong>Need Help?</strong></p>
       <ul class="top-icon">
        <li class="blue-bg"><a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Chat"><img src="images/support.png"></a></li>
        <li class="green-bg"><a title="" data-placement="top" data-toggle="tooltip" 
          href="common-questions.html" data-original-title="Common Questions"><img src="images/question.png"></a></li>
        <li class="gray-bg"><a title="" data-placement="top" data-toggle="tooltip" 
          href="contact.html" data-original-title="E-mail"><img src="images/envelope.png"></a></li>
      </ul>
     
    </div>
    <div class="px-5 fi-po green-bg-g">
    </div>          
  </div>
</div>
<a class="btn btn btn-secondary fix_right" data-toggle="modal" data-target="#paymentCodePopup" href="javascript:;"><i class="fa fa-phone"></i> <span>Talk To A Live Person</span></a>
  <script type="text/javascript">
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
  $(document).ready(function(){
  $(".hide_show").click(function(){
    $(this).toggleClass("left_shift");
    var img=$(this).find("img");
    if($(img).attr('src') === "images/menu.png") {
      $(img).attr('src', "images/close.png");
    } else {
      $(img).attr('src', "images/menu.png")
    }
    $(".left_panel, .right_panel").toggleClass("collaps");
  });
});
</script>