{% load static %}        
<nav class="sidebar sidebar-offcanvas" id="sidebar">
   <ul class="nav">
      <li class="nav-item {% ifequal dashboard_section 'yes' %}active{% endifequal %}">
         <a class="nav-link" href="/">
         <i class="mdi mdi-home menu-icon"></i>
         <span class="menu-title">Driver Dashboard</span>
         </a>
      </li>
      <li class="nav-item {% ifequal profile_section 'yes' %}active{% endifequal %}">
         {% ifequal request.session.userrole 'customer' %}
         <a class="nav-link" href="/customer/profile/">
         {% endifequal %}
         {% ifequal request.session.userrole 'company' %}
         <a class="nav-link" href="/company/profile/">
         {% endifequal %}
         {% ifequal request.session.userrole 'driver' %}
         <a class="nav-link" href="/driver/profile/">
         {% endifequal %}
         <i class="mdi mdi-account-card-details menu-icon"></i>
         <span class="menu-title">Profile</span>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link"   data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
            <!--   <i class="mdi mdi-laptop menu-icon"></i> -->
            <img src="/static/images/cust-white-1.png" class="img-custom-c icon-main">
            <img src="/static/images/cust-white-purple.png" class="img-custom-c icon-hover">
            <span class="menu-title">My Jobs</span>
            <i class="menu-arrow"></i>
         </a>
         <div class="collapse" id="ui-basic">
            <ul class="nav flex-column sub-menu  jobs-inner-menu">
               <li class="nav-item"> <a class="nav-link" href="/driver/myjobs/outstandingrequests/"><i class="mdi mdi-image-filter-vintage menu-icon"></i> Outstanding Jobs</a></li>
               <li class="nav-item"> <a class="nav-link" href="/driver/myjobs/completedrequests/"><i class="mdi mdi-check menu-icon"></i> Completed Jobs</a></li>
            </ul>
         </div>
      <li class="nav-item {% ifequal changepassword_section 'yes' %}active{% endifequal %}">
         <a class="nav-link" href="/changepassword/">
         <img src="/static/images/forgot-passwordw.png" class="img-custom-c icon-main">
         <img src="/static/images/forgot-passwordw-p.png" class="img-custom-c icon-hover">
         <span class="menu-title">Change password</span>
         </a>
      </li>
      <li class="nav-item ">
         <a class="nav-link" href="/driver/paymenthistory/">
         <i class="mdi  mdi-coin menu-icon menu-icon"></i>
         <span class="menu-title">Payment History</span>
         </a>
      </li>
      <li class="nav-item ">
         <a class="nav-link" href="/driver/chat/test/">
         <i class="mdi mdi-comment-processing-outline menu-icon"></i>
         <span class="menu-title">Admin Messages</span>
         </a>
      </li>
       <li class="nav-item ">
         <a class="nav-link" href="/driver/vehicle/">
         <i class="mdi mdi mdi-car-wash menu-icon"></i>
         <span class="menu-title">Vehicle</span>
         </a>
      </li>
      <li class="nav-item {% ifequal aboutus_section 'yes' %}active{% endifequal %}">
         <a class="nav-link" href="/aboutus/" target="_blank">
            <!-- <img src="/static/images/About_us_copyw.png" class="img-custom-c"> -->
            <img src="/static/images/info-w.png" class="img-custom-c icon-main">
            <img src="/static/images/info-p.png" class="img-custom-c icon-hover">
            <span class="menu-title">About Us</span>
         </a>
      </li>
      
      </li>
   </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
   path=window.location.href
   console.log(path)
   $('ul.nav li a').each(function(){
     if(this.href == path){
       console.log($(this).parents().addClass('active'))
     }
   })
</script>