JSFiddle - React, Tailwind, and code Playground

by edemdrummer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="sidebar" class="sidebar cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
					
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"><div data-height="100%" data-scrollbar="true" style="overflow: hidden; width: auto; height: 100%;">
<ul class="nav">
<li class="nav-profile">
<div class="image">
<img style="width: 34px; height: 34 px;" class="img-circle" alt="profile picture" src="https://lh4.googleusercontent.com/-Oa4qR88ioSQ/AAAAAAAAAAI/AAAAAAAAABY/TAIVb17uVQ4/s120-c/photo.jpg"></div>
<div class="info">
<p>
							Anita Sudan
							<small>sadmin</small>
</p>
</div>
</li>
</ul>
<ul class="nav">
<li>
<a onclick="openLink('po_welcome.act');" href="javascript:void(0);" class="actual more"><i class="fa fa-home"></i><span>Dashboard</span></a>
</li>
<li class="has-sub">
<a href="javascript:void(0);" class=""><i class="fa fa-laptop"></i><b class="caret pull-right"></b><span>Master data</span></a>
<ul class="sub-menu">
<li class="">
<a onclick="openLink('po_showClients.act');" href="javascript:void(0);"><i></i><span title="List of all Clients">Clients</span></a>
</li>
<li class="">
<a onclick="openLink('po_showOrgStructures.act');" href="javascript:void(0);"><i></i><span title="List of all Organization structures">Orgstructures</span></a>
</li>
<li class="">
<a onclick="openLink('po_showRoles.act');" href="javascript:void(0);"><i></i><span title="List of all Roles">Roles</span></a>
</li>
<li class="">
<a onclick="openLink('po_showGroups.act');" href="javascript:void(0);"><i></i><span title="List of all Groups">Groups</span></a>
</li>
<li class="">
<a onclick="openLink('po_showPersons.act');" href="javascript:void(0);"><i></i><span title="List of all Persons">Persons</span></a>
</li>
<li class="">
<a onclick="openLink('po_orgBuilder.act');" href="javascript:void(0);"><i></i><span title="Form for editing the...

CSS

.actual {
    background: yellow;
}
.more {
    background: black;
    
}
.sidebar .sub-menu>li>a.current:before {
    color: #11a1d7;
}

.current span, .more, .actual {
    color: green;
}
.active {
    color: #fff !important;
    background: #11a1d7 !important;
}
.active-sub-menu {
    background: none !important;
}
.sidebar {
    overflow: initial !important;
    height: 100%;
}
.sidebar {
    overflow: initial !important;
}
.sidebar .sub-menu>li>a>.active {
    color: #00acac !important;
    background: #ffff00 !important;
}
.cbp-spmenu, .cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.cbp-spmenu-vertical {
    width: 240px;
    top: 0;
    z-index: 1000;
}
.cbp-spmenu {
    position: fixed;
}
.sidebar {
    width: 350px;
    height: 900px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: #f0f0f0;
    z-index: 10;
    overflow: initial;
}

JavaScript

var _liSelector = 'a';

$(_liSelector).each(function () {

    $(this).click(function () {
        $('a').removeClass('current');
        $('a').removeClass('active');

        if ($(this).closest('li').hasClass('has-sub')) {

            $('a').removeClass('active');

            if ($(this).parent().closest('ul').hasClass('nav')) {
                $(this).addClass('active');

                if ($(this).parent().closest('ul').hasClass('nav').find('.current')) {
                    alert('here we go now');
                }
            }

            $('a').removeClass('current');

        } else {
            $(this).addClass('current');
        }
        if ($(this).parent().closest('ul').hasClass("sub-menu")) {

            $(this).parents('.has-sub').last().find('a:first').addClass('active');

            $(this).parents().closest('.has-sub').find('a:first').addClass('current');

            $(this).parents('.has-sub').last().find('a:first').removeClass('current');
        }
    });

});

var _liATag = 'a';

$(_liATag).each(function () {

    $(this).click(function () {

        if ($(this).hasClass('current')) {
            if ($('li:not(:has(ul))')) {
                $('li a').removeClass('actual');
            }
            $(this).parents().closest('.has-sub').find('a:first').addClass('actual');
            $(this).parents('.has-sub').last().find('a:first').removeClass('actual');
            $(this).addClass('actual');
        }

        if ($(this).next('ul').hasClass('sub-menu')) {
            //do nothing
        } else {
            $('li a').removeClass('more');
            $(this).addClass('more');
        }
        if ($(this).parents().find('a').hasClass('more')) {
            $(this).addClass('more');
        }

    });
});