JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://jakiestfu.github.io/Snap.js/snap.js"></script>
<!-- Toolbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="brand" href="#">Project</a>

            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a>

                    </li>
                    <li><a id="open-left" href="#">Items</a>

                    </li>
                    <li><a id="open-right" href="#">Settings</a>

                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

<!-- Drawers -->
<div class="snap-drawers">
    <div class="padded snap-drawer snap-drawer-left">
        <div>
            <h3>Items</h3>
            <ul>
                <li>Item #1</li>
                <li>Item #2</li>
                <li>Item #3</li>
            </ul>
        </div>
     <div class="padded snap-drawer snap-drawer-right"></div>  
</div>

<!-- Content -->
<div id="content" class="container-fluid snap-content">
    <div class="padded">
        <p>Do something, yo!</p>
        <div>
            <label>Name:</label>
            <input type="text" ng-model="yourName" placeholder="Enter a name here">
            <hr>
             <h1>Hello {{yourName}}!</h1>

        </div>
    </div>
</div>

CSS

.padded {
    padding-top: 60px;
}
/* From snap.css */
 .snap-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 2;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.snap-drawers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
}
.snap-drawer {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: auto;
    width: 265px;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
.snap-drawer-left {
    left: 0;
    z-index: 1;
}
.snap-drawer-right {
    right: 0;
    z-index: 1;
}
.snapjs-left .snap-drawer-right, .snapjs-right .snap-drawer-left {
    display: none;
}
.snapjs-expand-left .snap-drawer-left, .snapjs-expand-right .snap-drawer-right {
    width: 100%;
}

JavaScript

var snapper = new Snap({
    element: document.getElementById('content')
});

var addEvent = function addEvent(element, eventName, func) {
    if (element.addEventListener) {
        return element.addEventListener(eventName, func, false);
    } else if (element.attachEvent) {
        return element.attachEvent("on" + eventName, func);
    }
};

addEvent(document.getElementById('open-left'), 'click', function () {
    if (snapper.state().state == "left") {
        snapper.close();
    } else {
        snapper.open('left');
    }
});