JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="mySidenav" class="sidenav">
  <a id="close-menu">&times;</a>
  <a href="#">Home</a>
  <a href="#">Po</a>
  <a href="#">Do</a>
  <a href="#">So</a>
  <a href="#">Ao</a>
</div>

<nav class="navbar navbar-default">
  <div class="container" style="padding: 0">
    <div class="text-left col-md-2">
      <a id="open-menu" class="btn btn-default navbar-btn" style="margin-left: 0; float: left"><i class="glyphicon glyphicon-menu-hamburger"></i></a>
    </div>
  </div> 
</nav>

<div id="l_m" >
  <h1>TEST PAGE</h1>
</div>

CSS

<style>
#l_m {
transition: margin-left .5s;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    top: 50px;
    left: 0;
    background-color: #f8f8f8;
    overflow-x: hidden;
    transition: 0.5s;
    border-right: 1px solid #e7e7e7;
}

.sidenav a {
    padding: 8px 8px 8px 20px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
    border-bottom: 1px solid #e7e7e7;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.side-nav-show{
   width : 250px;
}
.l_m-show{
  marginLeft:250px;
  position:absolute;
  width:100%;
}

</style>

JavaScript

$('#open-menu').click(function() {
  $("#mySidenav").toggleClass('side-nav-show');
  $("#l_m").toggleClass('l_m-show');
  // $(this).attr('id','close-menu');
});