{% load static %}        
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
          <ul class="nav">
            <!-- <li class="nav-item nav-profile">
              <a href="#" class="nav-link">
                <div class="nav-profile-image">
                  <img src="{% static 'images/camera.png' %}" alt="profile" style = "height:44px;width:44px;">
                  <span class="login-status online"></span> -->
                  <!--change to offline or busy as needed-->
               <!--  </div>
                <div class="nav-profile-text d-flex flex-column">
                  <span class="customer-name mb-2">{{user.name}}</span> -->
                 <!--  <span class="text-5">{% ifequal request.session.userrole 'customer' %}Customer{% endifequal %}{% ifequal request.session.userrole 'company' %}Company{% endifequal %}</span> -->
          <!--       </div>
              </a>
            </li> -->
            <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">{% ifequal request.session.userrole 'customer' %}Customer{% endifequal%}{% ifequal request.session.userrole 'company' %}Company{% endifequal%} 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="/customer/profile/">
              {% endifequal %}
                <i class="mdi mdi-account-card-details menu-icon"></i>
                <span class="menu-title">Profile</span>
            
              </a>
            </li>
              {% ifequal request.session.userrole 'customer' %}
              <li class="nav-item">
                    <a class="nav-link" href="/customer/wallet/">
                  <img src="/static/images/dollar-w.png" class="img-custom-c icon-main">
                  <img src="/static/images/dollar-p.png" class="img-custom-c icon-hover">
                  <span class="menu-title">Wallet</span>
                </a>
              </li>
              {% endifequal %}
               {% ifequal request.session.userrole 'company' %}
                <li class="nav-item">
                    <a class="nav-link" href="/company/wallet/">
                  <img src="/static/images/dollar-w.png" class="img-custom-c icon-main">
                  <img src="/static/images/dollar-p.png" class="img-custom-c icon-hover">
                  <span class="menu-title">Wallet</span>
                </a>
              </li>
              {% endifequal %}
            <li class="nav-item {% ifequal quickfareestimate_section 'yes' %}active{% endifequal %}">
              <a class="nav-link" href="/quickfareestimate/">
                
             <!--    <i class="mdi mdi-cash menu-icon"></i> -->

             <img src="/static/images/tickets-w.png" class="img-custom-c icon-main">
                  <img src="/static/images/tickets-p.png" class="img-custom-c icon-hover">

                <span class="menu-title">Quick Fare Estimate</span>
                
              </a>
            </li>
            <li class="nav-item {% ifequal placeorder_section 'yes' %}active{% endifequal %}">
              {% ifequal request.session.userrole 'customer' %}
                  <a class="nav-link" href="/placeorder/test2/">
                {% endifequal %}
              {% ifequal request.session.userrole 'company' %}
                  <a class="nav-link" href="{% url 'company-place-order' %}">
              {% endifequal %}
                <i class="mdi mdi-cart-outline menu-icon"></i>
                <span class="menu-title">Place Order</span>
                
              </a>
            </li>
          <!--   <li class="nav-item {% ifequal myjobs_section 'yes' %}active{% endifequal %}">
              <a class="nav-link" href="/myjobs/">
                 <i class="mdi mdi-laptop menu-icon"></i>
                <span class="menu-title">My Jobs</span>
               
              </a>
            </li> -->

<!-- <li class="nav-item">
              <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
                <span class="menu-title">Basic UI Elements</span>
                <i class="menu-arrow"></i>
                <i class="mdi mdi-crosshairs-gps menu-icon"></i>
              </a>
              <div class="collapse" id="ui-basic">
                <ul class="nav flex-column sub-menu">
                  <li class="nav-item"> <a class="nav-link" href="pages/ui-features/buttons.html">Buttons</a></li>
                  <li class="nav-item"> <a class="nav-link" href="pages/ui-features/typography.html">Typography</a></li>
                </ul>
              </div>
            </li>  -->



            <li class="nav-item {% ifequal myjobs_section 'yes' %}active{% endifequal %}">
              <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="http://13.126.26.12/static/images/cust-white-1.png" class="img-custom-c"> -->


                   <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">Customer 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="/myjobs/ongoing/test/"><i class="mdi mdi-image-filter-vintage menu-icon"></i> Ongoing Jobs</a></li>
                  <li class="nav-item"> <a class="nav-link" href="/myjobs/completed"><i class="mdi mdi-check menu-icon"></i>Completed Jobs</a></li>
                </ul>
              </div>
            </li>
            <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"> -->

                  <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 {% ifequal aboutus_section 'yes' %}active{% endifequal %}">
              <a class="nav-link" href="/aboutus/" target="_blank">

                   <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 class="nav-item {% ifequal myjobs_section 'yes' %}active{% endifequal %}">
              <a class="nav-link" href="/myjobs/completed">
                 <i class="mdi mdi-laptop menu-icon"></i>
                <span class="menu-title">Completed Jobs</span>
               
              </a>
            </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>