JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page" id="page1">
    <div data-role="panel" id="panel" data-position="right" data-display="push" data-dismissible="false">
        <p>Panel</p>
        <a href="#panel" data-rel="close" data-role="button">Close panel</a>
    </div>
    <div data-role="header" data-position="fixed">
         <h1>header</h1>

    </div>
    <div data-role="content">
        <p>contents</p> <a data-role="button" href="#page2">Page 2</a>

    </div>
    <div data-role="footer" data-position="fixed">
         <h1>footer</h1>

    </div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true">
    <div data-role="panel" id="panel" data-position="right" data-display="push" data-dismissible="false">
        <p>Panel</p>
        <a href="#panel" data-rel="close" data-role="button">Close panel</a>
    </div>
    <div data-role="header" data-position="fixed">
         <h1>header</h1>

    </div>
    <div data-role="content">
        <p>contents</p>
    </div>
    <div data-role="footer" data-position="fixed">
         <h1>footer</h1>

    </div>
</div>

JavaScript

$(document).on("swipeleft", '[data-role=page]', function (e) {
    if (!$.mobile.activePage.hasClass('ui-page-panel-open') && e.type == "swipeleft") {
        $.mobile.activePage.find("#panel").panel("open");
    }
});