
  <style>
        ul.sidebar-submenu{
            display:none;
        }
        ul.sidebar-submenu.active{
            display:block;
        }
        
        .list-group-item {
   
    width: 100%;
}
  li.list-group-item.sidebar-dropdown a {
    width: 100% !important;
    display: inline-block !important;
}     
li.list-group-item.sidebar-dropdown.active{
    z-index: 2;
    color: #fff;
     background-color: none !important;
     border-color: none !important;
}
.list-group p{
    margin: 0;
}
    </style>

<div class="list-group">
  {% if not logged %}
  <a href="{{ login }}" class="list-group-item">{{ text_login }}</a> <a href="{{ register }}" class="list-group-item">{{ text_register }}</a> <a href="{{ forgotten }}" class="list-group-item">{{ text_forgotten }}</a>
  {% endif %}
{% if logged %}
 {% if module_purpletree_multivendor_status %}
 {% if isSeller.store_status is empty %}
 <a href="{{ becomeseller }}" class="list-group-item">{{ text_becomeseller }}</a>
 {% endif %}
 {% endif %}
 {% endif %}
 
  <a href="{{ dashboard }}" class="list-group-item">  {{ text_dashboard }} </a>
   {% if logged %}
   <p class="list-group-item sidebar-dropdown">Account
    <ul class="list-group sidebar-submenu" style="margin-bottom : 10px;">
       <a href="{{ edit }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; {{ text_edit }}</a>
       <a href="{{ password }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; {{ text_password }}</a>
       <a href="{{ aadhar }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; Aadhar Info</a>
       <a href="{{ nomine }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; Nomine Info</a>
       <a href="{{ idcard }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; VB Id Card</a>
       {#<a href="{{ kyc }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_kyc }}</a>#}
        <a href="{{ address }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_address }}</a>
      </ul>
  </p>
    <p class="list-group-item sidebar-dropdown">KYC
        <ul class="list-group sidebar-submenu" style="margin-bottom : 10px;">
            <a href="{{ pan }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; {{ text_pan }}</a>
            <a href="{{ bank }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; {{ text_bank }}</a>
        </ul>
    </p>
   <p class="list-group-item sidebar-dropdown">Team
    <ul class="list-group sidebar-submenu"  style="margin-bottom : 10px;">
       <a href="{{ direct }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_direct }}</a>
        <a href="{{ generation }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_generation }}</a>
      </ul>
  </p>
  <a href="{{ promote_rank }}" class="list-group-item">  {{ text_promote_rank }} </a>
   <p class="list-group-item sidebar-dropdown">Incomes
    <ul class="list-group sidebar-submenu"  style="margin-bottom : 10px;">
       {% if current_month_income %}
           <a href="{{ current_month_income }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_current_month_income }}</a>
           <a href="{{ incomes }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_incomes }}</a>
        {% endif %}
      </ul>
  </p>
    <p class="list-group-item sidebar-dropdown">Shopping
    <ul class="list-group sidebar-submenu"  style="margin-bottom : 10px;">
           <a href="{{ wishlist }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_wishlist }}</a>
           <a href="{{ order }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_order }}</a>
      </ul>
  </p>
  
  
  <p class="list-group-item sidebar-dropdown">Payouts
    <ul class="list-group sidebar-submenu"  style="margin-bottom : 10px;">
        <a style="display:none;" href="{{ request_payout }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;Request Payout</a>
        <a href="{{ payout }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_payout }}</a>
        <a href="{{ business_detail }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;{{ text_business_detail }}</a>
      </ul>
  </p>
  <p class="list-group-item sidebar-dropdown">Support Tickets
    <ul class="list-group sidebar-submenu"  style="margin-bottom : 10px;">
        <a href="{{ create_ticket }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;Submit New Ticket</a>
        <a href="{{ ticket_list }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp;My Ticket List</a>
      </ul>
  </p>
  {% if chat %}<a href="{{ chat }}" class="list-group-item"><i class="fa fa-comments"></i> &nbsp;Live Chat</a>{% endif %}

  {% endif %}
  
  {#<a href="{{ account }}" class="list-group-item">{{ text_account }}</a>#}
  
 
 {# <a href="{{ download }}" class="list-group-item">{{ text_download }}</a><a href="{{ recurring }}" class="list-group-item">{{ text_recurring }}</a> <a href="{{ return }}" class="list-group-item">{{ text_return }}</a>#} 
{# <a href="{{ reward }}" class="list-group-item">{{ text_reward }}</a> #} 
{# <a href="{{ transaction }}" class="list-group-item">{{ text_transaction }}</a>#}
 
 {#<a href="{{ challenge }}" class="list-group-item">{{ text_challenge }}</a>#}
 
 <p class="list-group-item sidebar-dropdown">{{ text_challenge }}
        <ul class="list-group sidebar-submenu" style="margin-bottom : 10px;">
            <a href="{{ challenge_details }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; {{ text_challenge_details }}</a>
            <a href="{{ challenge_orders }}" class="list-group-item"><i class="fa fa-angle-double-right" style="font-size:12px;"></i> &nbsp; {{ text_challenge_orders }}</a>
        </ul>
 </p>
 
 <a href="{{ newsletter }}" class="list-group-item">{{ text_newsletter }}</a>
  {% if logged %}
  <a href="{{ logout }}" class="list-group-item">{{ text_logout }}</a>
  {% endif %}
</div>
<script>
    $(document).ready(function() {
    $(".sidebar-dropdown ").click(function() {
        $(".sidebar-submenu").slideUp(200);
        if (
            $(this)
            .parent()
            .hasClass("active")
        ) {
            $(".sidebar-dropdown").removeClass("active");
            $(this)
                .parent()
                .removeClass("active");
        } else {
            $(".sidebar-dropdown").removeClass("active");
            $(this)
                .next(".sidebar-submenu")
                .slideDown(200);
            $(this)
                .parent()
                .addClass("active");
        }
    });
});
</script>
