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">
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.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="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');"...

CSS

.sidebar .sub-menu>li>a.current:before {
    color: #11a1d7;
}
.current span, .actual span {
    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 {
}
.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

//'use strict';
// This is a custom jquery file to operate some dom manipulation in the generated html files

var webdesk = webdesk || {};

function _add_specific_class_to_selected_menu() {
    // this varialble will be used to store the previous visited last descendant
    var _prev = '';

    //the click event should not include the minify button
    $('a:not(.sidebar-minify-btn)').click(function () {

        //the nav-profile and minif classes are excluded
        if ($('.nav li:not(.nav-profile)') && $('.nav li:not(.minif)')) {

            $('a').parents().closest('.has-sub').find(' a:first').removeClass('active');

            if ($(this).parent().closest('ul').hasClass("sub-menu")) {

                if ($('li:not(:has(ul))')) {
                    $('a').removeClass('current');
                }

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

            //add active class to the first ancestor
            if ($(this).parent().closest('ul').hasClass('nav')) {
                $(this).addClass('active');
            }

            //removing current class from active classes or first ancestors
            if ($(this).hasClass('active')) {
                $(this).removeClass('current');
            }

            //menu itme is a main folder
            if ($(this).closest('ul').hasClass('nav')) {
                $('a').removeClass('active');
                $('a').removeClass('actual');
                $(this).addClass('active');
            }

            //if menu item is the last descendant in the folder
            if ($(this).parent('li').has('.sub-menu').length == 0) {

                $('li a').removeClass('actual');
                _prev = this;
                $(this).addClass('actual');

            } else {

                // if the menu item is a...