JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar" class="open">
        <div class="nav">
                <div class="tr">
                        <div class="top">
                                <ul>
                                    <li class="link"><img src="_images/attributes/user.svg"></li>
                                    <li class="link"><img src="_images/attributes/contribute.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                </ul>
                        </div>
                </div>
                <div class="tr">
                        <div class="middle">
                        </div>
                </div>
                <div class="tr">
                        <div class="bottom">
                                <ul>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="current"><img src="_images/attributes/attribute2.svg"></li>
                                </ul>
                        </div>
                </div>
        </div>
        <div class="content">
            <iframe src="http://fiddle.jshell.net/4gyDL/show/" frameBorder="0"></iframe>
            </ul>
        </div>
</div>

<div id="dummy-column"></div>

CSS

html, body {height:100%; margin:0; padding:0;}
#sidebar {
    position:fixed;
    top:0;
    bottom:0;
    overflow:auto;
    width: 20em;
    z-index:2;
    color: #ffffff;
    background-color: #303030;
    -moz-box-shadow: inset -30px 0 30px -10px #222;
    -webkit-box-shadow: inset -30px 0 30px -10px #222;
    box-shadow: inset -30px 0 30px -10px #222;
    -webkit-transition:margin 1s ease-in;
    -moz-transition:margin 1s ease-in;
    -ms-transition:margin 1s ease-in;
    transition:margin 1s ease-in;
    white-space: nowrap;
}


.nav{
    display:table;
    height:100%;
    table-layout:fixed;
    width:3em;
    float: right;
    background-color: #2a2a2a;
    border-left: 2px groove #454545;    
    -moz-box-shadow: inset -10px 0 10px -10px #000;
    -webkit-box-shadow: inset -10px 0 10px -10px #000;
    box-shadow: inset -10px 0 10px -10px #000;
}

.content {
    height:100%;
    position: fixed;
    width: 16.875em;
    float: right;
    display:inline-block;
    color:#eee;
    font-family: "Georgia", Sans-Serif;
}

.content iframe{
    width: 100%;
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.top, .bottom, .middle {
    width:3em;
    display:table-cell;
    text-align: center;
}

.top{vertical-align:top;}
.middle {vertical-align:middle;}
.bottom{vertical-align:bottom;}
.top,.bottom{height:1px}


.tr{display:table-row}

#sidebar ul {margin:0; padding: 0;}

#sidebar .nav li {
    padding: .5625em;
    list-style:none;
    position: relative;
	opacity: 0.8;
}
#sidebar .nav li img {
    height: 1.875em;
    width: 1.875em
}

#sidebar .nav li:before {
    content: "";
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    width: 3px;
    background:white;
    visibility: hidden;
}
#sidebar .nav li:hover, #sidebar .nav li.current {
	opacity: 1;
}

#sidebar .nav li.link:hover:before, #sidebar .nav li.current:before {
    visibility: visible;
	opacity: 1;
}

#sidebar .nav .top li { border-bottom: 2px groove #454545...

JavaScript

function closeSidebar(functionAfterClose) {
		var functionAfterClose = functionAfterClose || function() {};
		$("#sidebar").removeClass("open");
		$("#sidebar").animate({marginLeft: margin*-1},"fast", "swing", functionAfterClose);
		$("#dummy-column").animate({marginLeft: margin*-1},"fast", "swing");
}

function openSidebar() {
		$("#sidebar").addClass("open");
		$("#sidebar").animate({marginLeft:0},"fast", "swing");
		$("#dummy-column").animate({marginLeft:0},"fast", "swing");
}

	var margin = $("#sidebar").width() - $(".nav").width();


	$("#sidebar .nav li").click(function(){
		
			$("#sidebar .nav li").removeClass("current");
			closeSidebar(function() {
				alert("function called");
				$(this).addClass("current");
				openSidebar();
			});
	});