JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="ttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<header id="header" class="navbar navbar-static-top">
  <div class="navbar-header">
    <a type="button" id="button-menu" class="pull-left"><i class="fa fa-indent fa-lg"></i> </a>
    <a class="navbar-brand hidden-xs">BS3 Off Canvas</a>
  </div>
<ul class="nav pull-right">
<li><a href="#"><i class="fa fa-sign-out"></i> Sign Out</a></li>     
</ul>
</header>
  
<nav id="column-left">
  <ul id="menu">
    <li id="system"><a class="parent"><i class="fa fa-tags fa-fw"></i> <span>System</span></a>
      <ul>
        <li><a class="parent">Users</a>
          <ul>
            <li><a>Users Lists</a></li>
            <li><a>Users Permissions</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<div id="content">
  <div class="container-fluid">
      <div class="panel panel-default" id="gap-lg">
        <div class="panel-heading"><h1 class="panel-title">Panel Default</h1></div>
        <div class="panel-body">
          
        </div>
      </div>
  </div>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

CSS

#gap-lg {
  margin-top: 20px;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
}

a:hover, a:focus {
	text-decoration: none;
}

/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

#container {
	min-height: 100%;
	width: 100%;
	position: relative;
}

.container-fluid {
	padding-left: 20px;
	padding-right: 20px;
}

#header {
	min-height: 0px;
	background: #FFFFFF;
	border-bottom: 1px solid #E5E5E5;
	margin: 0;
	padding: 0;
}

#header .nav > li {
	float: left;
}

#header .nav > li li {
	min-width: 200px;
}

#header .navbar-header {
	min-height: 0px;
	padding: 0;
}

/* Mobile */
@media (max-width: 767px) {
#header .navbar-header {
	margin-right: 0px;
	margin-left: 0px;
	float: left;
}
}

#header #button-menu + .navbar-brand {
	padding: 10px 10px 10px 10px;
	margin-right: 10px;
	height: auto;
}

#header .nav > li > a {
	padding: 3px 16px;
	line-height: 38px;
	cursor: pointer;
	color: #6D6D6D;
	border-left: 1px solid #E1E1E1;
}

#header .nav > li > a > .label {
	text-shadow: none;
	padding: 1px 4px;
	position: absolute;
	top: 8px;
	left: 6px;
}

#button-menu {
	padding: 10px 17px 9px 17px;
	line-height: 25px;
	float: left;
	display: inline-block;
	cursor: pointer;
	color: #6D6D6D;
	border-right: 1px solid #E1E1E1;
}

#profile {
	display: none;
}

#column-left.active #profile {
	display: block;
	padding: 10px 15px 10px 15px;
	overflow: auto;
	border-bottom: 1px solid #585858;
}

#profile div {
	float: left;
	color: #C4C4C4;
}

#profile div + div {
	margin-left: 15px;
}

#profile h4 {
	margin-top: 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #FFF;
	margin-bottom: 0;
}

#column-left {
	width: 50px;
	height: 100%;
	background-color: #515151;
	position: absolute;
	top: 0px;
	padding-top: 50px;
	z-index: 10;
	transition: all 0.3s;
}

#column-left.active {
	width: 235px;
	display: block;
}

#content {
	padding-bottom: 40px;
	transition: all...

JavaScript

// Menu button

$('#button-menu').on('click', function() {
	
	// Checks if the left column is active or not.
	if ($('#column-left').hasClass('active')) {
		
		localStorage.setItem('column-left', '');

		$('#button-menu i').replaceWith('<i class="fa fa-indent fa-lg"></i>');

		$('#column-left').removeClass('active');

		$('#menu > li > ul').removeClass('in collapse');
		$('#menu > li > ul').removeAttr('style');

	} else {
		
		localStorage.setItem('column-left', 'active');

		$('#button-menu i').replaceWith('<i class="fa fa-dedent fa-lg"></i>');
				
		$('#column-left').addClass('active');

		// Add the slide down to open menu items
		$('#menu li.open').has('ul').children('ul').addClass('collapse in');
		$('#menu li').not('.open').has('ul').children('ul').addClass('collapse');
	}
});

// Menu

$('#menu').find('li').has('ul').children('a').on('click', function() {
	if ($('#column-left').hasClass('active')) {
		$(this).parent('li').toggleClass('open').children('ul').collapse('toggle');
		$(this).parent('li').siblings().removeClass('open').children('ul.in').collapse('hide');
	} else if (!$(this).parent().parent().is('#menu')) {
		$(this).parent('li').toggleClass('open').children('ul').collapse('toggle');
		$(this).parent('li').siblings().removeClass('open').children('ul.in').collapse('hide');
	}
});

// Set last page opened on the menu

$('#menu a[href]').on('click', function() {
	sessionStorage.setItem('menu', $(this).attr('href'));
});

if (!sessionStorage.getItem('menu')) {
	$('#menu #dashboard').addClass('active');
} else {
	// Sets active and open to selected page in the left column menu.
	$('#menu a[href=\'' + sessionStorage.getItem('menu') + '\']').parents('li').addClass('active open');
}

if (localStorage.getItem('column-left') == 'active') {
	$('#button-menu i').replaceWith('<i class="fa fa-dedent fa-lg"></i>');
		
	$('#column-left').addClass('active');
		
	// Slide Down Menu
	$('#menu li.active').has('ul').children('ul').addClass('collapse in');
	$('#menu...