JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<div id="menu">Menu</div>

<div id="page1" data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">    
        Page 1
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

CSS

html, body, .ui-mobile .ui-page-active, #page1 {
    overflow-x: hidden !important;
}

#menu {
    top: 0;
    bottom: 0;
    z-index: 2;
    left: -300px;
    width: 400px;
    position: absolute;
    background-color: red;
}

#page1 {
    left: 100px;
}

JavaScript

var menuOpen = false,
    menuMoveTo = 0,
    pageMoveTo = 0,
    animationTime = 350;

$.mobile.hidePageLoadingMsg();

$( '#menu' ).bind( 'click', function() {
    
    if ( menuOpen ) {
        menuMoveTo = -300;
        pageMoveTo = 100;
    } else {
        menuMoveTo = 0;
        pageMoveTo = 400;
    }

    $( this ).animate({
        left: menuMoveTo
    }, animationTime );
    
    $.mobile.activePage.animate({
        left: pageMoveTo
    }, animationTime );
    
    menuOpen = !menuOpen;
});