JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<div id="" class="wrapper p4t-sidebar-menu ">

    <ul class="no-hover"><li><a><span class="glyphicon glyphicon-menu-hamburger hide-show-icon-hide "></span> <span class=" glyphicon glyphicon-pushpin pin-right-icon pull-right"></span></a></li></ul>
    <ul class="p4t-sidebar-menu-all-modules ul-level-1">
        <li><a><span class="glyphicon glyphicon-user " data-toggle="collapse"></span> <span class="p4t-menu-name">My Pool4Tool</span></a></li>
        <li class="has-sub-menu"><a href="#p4t-sidebar-menu-dashboard" data-toggle="collapse" ><span class="glyphicon glyphicon-blackboard "></span> <span class="p4t-menu-name">Dashboard</span></a>
            <ul class="collapse ul-level-2" id="p4t-sidebar-menu-dashboard">
                <li class="has-no-sub-menu">
                    <a href="" data-toggle="collapse">
                        <div class="menu-left-icon pull-left"><span class="select-item-circle"></span></div>
                        <div class="p4t-menu-name"><span>Main Dashboard</span></div>
                        <div class="pull-right"><span class="glyphicon glyphicon-chevron-down  menu-right-icon"></span></div>
                    </a>
                </li>
                <li class="has-no-sub-menu">
                    <a href="#" data-toggle="collapse">
                        <div class="menu-left-icon pull-left"><span class="select-item-circle"></span></div>
                        <div class="p4t-menu-name"><span>Orders</span></div>
                        <div class="pull-right"><span class="glyphicon glyphicon-chevron-down  menu-right-icon"></span></div>
                    </a>
                </li>
            </ul>
        </li>
        <li><a><span class="glyphicon glyphicon-globe" data-toggle="collapse"></span> <span class="p4t-menu-name">SRM</span></a></li>
        <li><a><span class="glyphicon glyphicon-hd-video " data-toggle="collapse"></span> <span class="p4t-menu-name">SCM</span></a></li>
        <li><a><span class="glyphicon...

CSS

.p4t-sidebar-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left:400px;
    width: 250px;
    overflow: auto;
    background-color: #252525;
    z-index:102;
}

.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 {
    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 {
   ...

JavaScript

$(document).ready(function () {
        setTimeout(function () {
            var new_sidebar_top_nav = _.template($('#new_sidebar_top_nav').html());
            header && header.setHeadline('<div class="collapse-group"><h1>Sidebar</h1>' +
            '</div>', new_sidebar_top_nav);
        }, 1000);
    });


    /** ADD AND REMOVES ACTIVE-STYLE CLASS FIRST LEVEL OF MENU **/
    $(document).on('click', '.p4t-sidebar-menu-all-modules.ul-level-1 > li > a', function () {
        $('.ul-level-1 > li > a').each(function () {
            $('.ul-level-1 li').not('.has-sub-menu').find('a').removeClass('active-item');
        });
        $(this).addClass('active-item');
        if ($(this).hasClass('collapsed')) {
            $(this).removeClass('active-item');
        }
    });
    /** ADD AND REMOVES ACTIVE-STYLE CLASS FIRST LEVEL OF MENU END**/

    /** ADD AND REMOVES ACTIVE-STYLE CLASS SECOND LEVEL OF MENU **/
    $(document).on('click', '.p4t-sidebar-menu-all-modules .ul-level-2 > li > a', function () {
        //console.log($(this).closest('li').find('ul a.active-item-level-three-color'));
        if (!$(this).closest('li').hasClass('has-no-sub-menu')) {
            if (!$(this).hasClass('collapsed')) {
                $(this).addClass('active-item-level-two make-visible');
                //$(this).find('.menu-right-icon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
            } else if ($(this).closest('li').find('ul a.active-item-level-three-color').length != 0) {
                //$(this).find('.menu-right-icon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
                console.log('die');
            } else {
                //$(this).find('.menu-right-icon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
                console.log('die - 2');
                $(this).removeClass('active-item-level-two active-item-level-two-color make-visible');
            }
        }
        else {
            $('.ul-level-3 >...