JSFiddle - React, Tailwind, and code Playground

Originally from http://zombiehippie.github.io/Side-drawer/

by Alexander

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left" title="Toggle navigation">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-inverse side-collapse in">
            <nav role="navigation" class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <!-- <li>
                        <a href="#Home">
                            <i class="fa fa-home fa-lg fa-fw"></i>
                            Home
                        </a>
                    </li> -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-briefcase fa-lg fa-fw"></i>
                            Programs
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">
                                    <i class="fa fa-fw fa-plus"></i>
                                    New Program
                                </a>
                            </li>
            ...

CSS

body {
    padding-top: 50px;
    padding-bottom: 50px;
    position: relative;
}
.nav .fa { margin-right: 5px; }
.badge { margin-left: 5px; }

/* from http://cssdeck.com/labs/twitter-bootstrap-badges */
.badge-warning { background-color: #f89406; }

.navbar-right-links {
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right;
}
.container-main { padding: 0 25px; min-width: 900px; }

@media screen and (max-width: 768px) {
    .side-collapse-container {
        width: 100%;
        position: relative;
        left: 0;
        transition: left .4s;
    }
    .navbar-collapse {
        text-overflow: ellipsis;
        /* Required for text-overflow to do anything */
        white-space: nowrap;
        overflow: hidden;
    }
    .side-collapse-container.out { left: 200px; }
    .side-collapse {
        top: 50px;
        bottom: 0;
        left: 0;
        width:200px;
        position: fixed;
        overflow: hidden;
        transition: width .4s;
    }
    .side-collapse.in { width: 0; }
    button.navbar-toggle { margin-left: 10px; }
    .nav-divider,
    .nav .nav-divider {
        border-bottom: solid #999 1px;
        border-left: 0;
        padding: 0;
    }
    .nav .nav-divider { margin: 0 15px; }
    .dropdown-menu .nav-divider { margin-left: 25px; }
}

JavaScript

$(document).ready(function () {
     var sideslider = $('[data-toggle=collapse-side]');
     var sel = sideslider.attr('data-target');
     var sel2 = sideslider.attr('data-target-2');
     sideslider.click(function (event) {
         $(sel).toggleClass('in');
         $(sel2).toggleClass('out');
     });
 });