JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="menu">
	<ul>
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Home</a></li> 
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Users</a>
			<ul>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-plus"></span>ADD</a></li>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Edit</a></li>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Delete</a></li>
			</ul>
		</li>
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-edit"></span>Web Design</a></li>
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Contact</a></li>
	</ul>

	<div id="sidebar-btn">
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum lacus rutrum, euismod mi non, vehicula urna. Fusce ultrices nisl eu magna ornare, posuere tincidunt erat rhoncus. Pellentesque sagittis enim sed tortor ultrices, congue tempor est hendrerit. Mauris convallis varius nisl et bibendum. Duis sodales ultricies libero, vel porta est tristique at. Sed nec ipsum luctus, pharetra turpis nec, fringilla augue. Maecenas rutrum dui nec mi cursus dignissim. Vestibulum venenatis dignissim orci vitae suscipit. Nam sit amet sapien ac diam venenatis imperdiet at dapibus orci. Duis viverra, sapien ac semper tincidunt, lectus libero facilisis enim, sit amet placerat mauris eros id augue. 
</div>

CSS

.body{
	padding: 0;
	margin: 0;
}

.menu{ 
	background-color: #34495E;
	width: 200px;
	height: 100%;
	display: block;
	position: absolute;
	left: -210px;
	top: 0px;
	transition: left 0.3s linear;
  z-index: 10;
}

.menu.visible{
	left: 0px;
	transition: left 0.3s linear;
}

#sidebar-btn{
	display: inline-block;
	vertical-align: middle;
	width: 35px;
	height: 15px;
	cursor: pointer;
	margin: 20px;
	position: absolute;
	top:0px;
	right:-70px;
}

#sidebar-btn span{
	height: 1px;
	background: #111;
	margin-bottom: 5px;
	display: block;
}

.menu ul{
	list-style: none;
	margin: 0;
	padding: 0;

}

.menu ul li{
	padding: 15px;
	position: relative;
	width: 170px;
	vertical-align: middle;
	background-color: #34495E;
	cursor: pointer;
	border-top: 1px solid #BDC3C7;
	border-right: 5px solid #F1C40F;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.menu ul ul{
	transition: all 0.3s;
	opacity: 0;
	position: absolute;
	border-left: 5px solid #F1C40F;
	visibility: hidden;
	left: 100%;
	top: -2%;
}

.menu ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	
}

.menu ul li a{
	color: #fff;
	text-decoration: none;
}

span {
	margin-right: 15px;

}

.menu ul li:hover{
	background-color: #2ECC71
}

.content {
  position: absolute;
}

JavaScript

$(document).ready(function(){
  $('#sidebar-btn').click(function() {
    $('.menu').toggleClass('visible');
  });
});