JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<div id="" class="wrapper p4t-sidebar-menu ">
  <ul class="p4t-sidebar-menu-all-modules">
  <li><a><span class="glyphicon glyphicon-remove hide-show-icon "></span> <span class=" glyphicon glyphicon-remove pin-right-icon pull-right"></span></a></li>
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">My Pool4Tool</span></a></li>
    <li><a href="#p4t-sidebar-menu-dashboard" data-toggle="collapse" ><span class="glyphicon glyphicon-remove "></span> <span class="p4t-menu-name">Dashboard</span></a></li>
    
      <ul class="collapse" id="p4t-sidebar-menu-dashboard">
        <li>
         <a href="#p4t-sidebar-menu-sourcing-rfq-deluxe" data-toggle="collapse">
            <span class=" glyphicon  menu-left-icon"><span class="select-item-circle"></span></span>
            <span>RFI</span>
            <span class="glyphicon glyphicon-chevron-down pull-right menu-right-icon"></span>
          </a>
        </li>
        <li class="">
          <a href="#p4t-sidebar-menu-sourcing-rfq-deluxe" data-toggle="collapse">
            <span class=" glyphicon  menu-left-icon"><span class="select-item-circle"></span></span>
            <span>RQF Deluxe</span>
            <span class="glyphicon glyphicon-chevron-down pull-right menu-right-icon"></span>
          </a>
        </li>
      </ul>
     
    
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">SRM</span></a></li>
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">SCM</span></a></li>
    <li><a><span class="glyphicon glyphicon-remove " data-toggle="collapse"></span> <span class="p4t-menu-name">Projects</span></a></li>
    <li><a href="#p4t-sidebar-menu-sourcing" data-toggle="collapse"><span class="glyphicon glyphicon-remove "></span>
        <span class="p4t-menu-name">Sourcing</span></a>
    </li>

    <ul class="collapse"...

CSS

.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 250px;
  overflow: auto;
  background-color: #252525;
}

.menu-left-icon .select-item-circle,
.menu-right-icon
{
  display:none;
}


li.has-sub-menu .menu-left-icon,
li.has-sub-menu .menu-right-icon{
  display:block;
}

.p4t-sidebar-menu ul li a {
  height: 40px;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  width: 100%;
  color: #666666;
}

.p4t-sidebar-menu ul li a:hover {
  background-color: #db4d40;
  color: #ffffff;
  transition: background-color 400ms;
}

.p4t-sidebar-menu ul li {
  list-style-type: none;
}

.p4t-sidebar-menu ul {
  padding: 0px;
}

.p4t-sidebar-menu>ul>ul>li> a {
  /*  padding-left: 45px;*/
  background-color: #151515;
}

.p4t-sidebar-menu>ul>ul>li> a .menu-left-icon {
  padding-left: 5px;
  padding-right: 10px;
  display: inline-block;
  width: 30px;
  visibility: hidden;
}

.menu-right-icon {
  padding-top: 3px;
}

.menu-left-icon .select-item-circle {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 50%;
  background-color: #db4d40;
  transition: background-color 400ms;
}

.p4t-sidebar-menu>ul>ul>ul>li> a {
  padding-left: 70px;
  background-color: #0d0d0d;
}

.p4t-sidebar-menu-all-modules {
  border: dotted 1px green;
  height: auto;
}

.active-item {
  background-color: #db4d40;
  color: #ffffff !important;
  -webkit-transition: background-color 400ms;
  /* Safari */
  transition: background-color 400ms;
}

.active-sub-item {
  color: #db4d40 !important;
  -webkit-transition: color 400ms;
  /* Safari */
  transition: color 400ms;
}

.active-sub-item:hover {
  color: #ffffff !important;
}

.p4t-sidebar-menu ul li a:hover .select-item-circle {
  background-color: #ffffff !important;
  transition: background-color 400ms;
}

.p4t-sidebar-menu-all-modules > li > a > span.glyphicon {
  padding-left: 5px;
  padding-right: 10px;
}

JavaScript

$(document).ready(function() {
  // ADD AND REMOVES ACTIVE-STYLE CLASS FIRST LEVEL OF MENU
  $(document).on('click', '.p4t-sidebar-menu-all-modules > li > a', function() {
    $('.p4t-sidebar-menu-all-modules > li > a').each(function() {
      $(this).removeClass('active-item');
    });
    $(this).addClass('active-item');
  });

  // ADD AND REMOVES ACTIVE-STYLE CLASS SECOND LEVEL OF MENU

  $(document).on('click', '.p4t-sidebar-menu-all-modules > ul > li > a', function() {
    $('.p4t-sidebar-menu-all-modules > ul > li > a').each(function() {
      $(this).removeClass('active-sub-item');
      $(this).closest('.has-sub-menu').find('.menu-left-icon').css('visibility', 'hidden');
    });
    $(this).addClass('active-sub-item');
    $(this).find('.menu-right-icon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $(this).closest('.has-sub-menu').find('.menu-left-icon').css('visibility', 'visible');
    if ($(this).hasClass('collapsed')) {
      $(this).removeClass('active-sub-item');
      $(this).closest('.has-sub-menu').find('.menu-left-icon').css('visibility', 'hidden');
    } else {

    }


  });


});