JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<a href="#" class="btn navbar-btn btn-toggle pull-left" id="menu-toggle">Toggle</a>

<div id="sidebar-wrapper">
        
</div>
    
<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
            </div>
        </div>
    </div>
</div>

CSS

/* Sidebar */
#sidebar-wrapper{
    z-index: 1;
    position:absolute;
    width:221px;
    height:100%;
    overflow-y: hidden;
    background-color: #f1f3f3;
    opacity:0.9;
    margin-top: 51px;
    margin-bottom: -51px;
    box-shadow:  7px 0 9px -7px rgba(0, 0, 0, 0.2);

}

/* Main Content */
#page-content-wrapper{
    width:100%;
    position:absolute;
    background-color: #f1f1f1;
    height:100%;
    padding-left:230px;
    padding-top: 66px;
    display:block; !important;
}

JavaScript

var $menuToggle = $("#menu-toggle");
    var $sidebarWrapper = $("#sidebar-wrapper");
    var $pageContentWrapper = $("#page-content-wrapper");
    
    var sidebarOpen = {
    	width: $sidebarWrapper.width(),
      paddingLeft: $sidebarWrapper.css("padding-left")
    };
    
    $menuToggle.click(function(event){
        event.preventDefault();
        var isClosed = $sidebarWrapper.width() == 0;
        
        if(isClosed){
            $sidebarWrapper.animate({
                width: sidebarOpen.width
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
            $pageContentWrapper.animate({
                paddingLeft: sidebarOpen.paddingLeft
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
        }else{
            $sidebarWrapper.animate({
                width: 0
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
            $pageContentWrapper.animate({
                paddingLeft: 0
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
        }
    });