JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="main-wrapper" style="height: 100%;">
        <div class="left-nav-layout">
            <a class="text-center" href="~/">Deshboard</a>
        </div>
        <div class="right-side-layout">
            <button class="nav-toggle">Toggle</button>
            <div class="container body-content">

                <hr />
                <footer>
                    <p>&copy; 2016 - Company name</p>
                </footer>
            </div>
        </div>
    </div>

CSS

html, body {
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: 0;
}

.left-nav-layout {
    background-color: #30333a;
    height: 100%;
    width: 15%;
    /*position: absolute;*/
    float: left;
}

.right-side-layout {
    background-color: green;
    height: 100%;
    width:100%;
    /*position: absolute;*/
    float: none;
}

JavaScript

$('.nav-toggle').on('click', function () {
    $('.left-nav-layout').toggle('slide', {direction: 'left'}, '-200px', 500);
});