JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#menu-toggle" id="menu-toggle"><span aria-hidden="true" class="glyphicon glyphicon-list"></span></a>
    </div>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-home"></span> Home</a>
        </li>
        <li>
          <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-question-sign"></span> Messages</a>
        </li>
        <li>
          <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-question-sign"></span> Help</a>
        </li>
        <li>
          <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-off"></span> Log Out</a>
        </li>
      </ul>
      <form action="#" class="navbar-form navbar-right" method="get">
        <div class="input-group">
          <input class="form-control" id="query" name="search" placeholder="Search..." type="text" value="">
          <div class="input-group-btn">
            <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search"></span></button>
          </div>
        </div>
    ...

CSS

body {
        background: #163040;
        color: #ffffff;
      }
      
      #wrapper {
        padding-left: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
      }
      
      #wrapper.toggled {
        padding-left: 150px;
      }
      
      #sidebar-wrapper {
        position: fixed;
        left: 224px;
        z-index: 1000;
        overflow-y: auto;
        /*margin-left: -345px;*/
        width: 0;
        height: 100%;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        border-radius: 0 50% 50% 0;
        height: 249px;
        overflow: hidden;
        top: 20%;
        box-shadow: inset -1px 0px 100px 2px rgba(0, 0, 0, .4), 1px 0px 100px 1px rgba(255, 255, 255, .02);
      }
      
      #wrapper.toggled #sidebar-wrapper {
        width: 240px;
      }
      
      #page-content-wrapper {
        padding: 15px;
        width: 100%;
      }
      
      #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-right: -250px;
      }
      /* Sidebar Styles */
      
      .sidebar-nav {
        position: absolute;
        top: 22px;
        margin: 0;
        padding: 0;
        width: 234px;
        list-style: none;
        padding-left: 128px;
      }
      
      .sidebar-nav li {
        line-height: 40px;
        margin-left: 20px;
      }
      
      .sidebar-nav li a {
        display: block;
        width: 246%;
        margin-left: -30px;
        padding-left: 37px;
      }
      
      .sidebar-nav li:nth-child(1) a {}
      
      .sidebar-nav li:nth-child(2) a {
        padding-left: 62px;
      }
      
      .sidebar-nav li:nth-child(3) a {
        padding-left: 72px;
      }
      
      .sidebar-nav li:nth-child(4) a {
        padding-left: 62px;
      }
      
      .sidebar-nav...

JavaScript

$(document).ready(function() {

          $("#menu-toggle").click(function(e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
          });

        });