JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header"> <a class="navbar-brand navbar-left" href="/" title="">
        MyBrand
    </a>

    </div>
</nav>
<div id="wrapper">  
<div class="row" style="background-color: #aaa;">
    <div class="col-md-offset-3">
        <button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
        <button id="mybutton" type="button" class="btn btn-info">Click me to toggle</button>
    </div>
</div>
</div>


<div class="col-md-3" id="mysidebar">
    <div style="position: relative;  top: 60px;  background-color: #7d1c80; opacity: 0.9;">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
            <li><a href="">Do something</a>

            </li>
        </ul>
    </div>
</div>

CSS

body {
    padding-top: 70px;
}

#wrapper
{
    position: relative;
}

#wrapper.navbar.navbar-inverse.navbar-fixed-top
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#mysidebar
{
    position: absolute;
    left: -200px;
    background-color: #faff18;
    height: 100%;
    z-index: 999;
    
}

JavaScript

var toggled = false;
$("#mybutton").click(function () {
    if (!toggled){
        $("#wrapper, .navbar").animate({
            left: '200px' 
        }, {queue: false});
        
        $("#mysidebar").animate({
            left: '0px' 
        }, {queue: false});
        toggled = true;
    } else {
        $("#wrapper, .navbar").animate({
            left: '0px' 
        }, {queue: false}); 
        
        $("#mysidebar").animate({
            left: '-200px' 
        }, {queue: false});
        toggled = false;
    }
});