JSFiddle - React, Tailwind, and code Playground

by elijah123467

HTML

<script src="https://cdnjs.com/libraries/hammer.js/"></script>
<body>
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
        <a class="navmenu-brand" href="#">
            <img src="images/askGodWhybutton.png" />
        </a>
        <ul class="nav navmenu-nav">
            <li>
                <a href="#" id="community-chat-tab" value="Community">Community Chat</a>
            </li>
            <li>
                <a href="#" id="biblical-chat-tab" value="Biblical">Biblical Chat</a>
            </li>
            <li>
                <a href="#" id="judaic-chat-tab" value="Judaic">Judaic Chat</a>
            </li>
            <li>
                <a href="#" id="islamic-chat-tab" value="Islamic">Islamic Chat</a>
            </li>
            <li>
                <a href="#" id="buddhist-chat-tab" value="Buddhist">Buddhist Chat</a>
            </li>
            <li>
                <a href="#" id="hindu-chat-tab" value="Hindu">Hindu Chat</a>
            </li>
        </ul>
    </div>
<div class="container">

        <div class="row">
            <button type="button" class="navbar-toggle col-xs-12 col-sm-1" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
                <span class="btn btn-custom">Rooms</span>
            </button>
            <label class="control-label row-label-left col-xs-12 col-sm-2" for="userName">Current User</label>
            <input class="input-sm row-input-right col-xs-12 col-sm-2" type="text" id="userName" data-bind="value: username" value="none" disabled>
            <div class="col-xs-12 col-sm-7"></div>
        </div>
        </div>
</body>

JavaScript

var setupHammertime = function () {
    console.log("setupHammertime");

    // Hammer gesture support.
    var body = $("#body");
    var navbar = $("#navbar");

    var hammertimeBodyRight = new Hammer.Manager(body[0], {
        recognizers: [
            [Hammer.Swipe, { direction: Hammer.DIRECTION_RIGHT}]
        ]
    });

    hammertimeBodyRight.on("swipe", function (ev) {
        var canvasSlid = navbar.hasClass("canvas-slid");
        if (!canvasSlid) {
            $(".navbar-toggle").click();
        }
    });

    var hammertimeBodyLeft = new Hammer.Manager(body[0], {
        recognizers: [
            [Hammer.Swipe, { direction: Hammer.DIRECTION_LEFT}]
        ]
    });

    hammertimeBodyLeft.on("swipe", function (ev) {
        var canvasSlid = navbar.hasClass("canvas-slid");
        if (canvasSlid) {
            $(".navbar-toggle").click();
        }
    });

    var hammertimeNavbarRight = new Hammer.Manager(navbar[0], {
        recognizers: [
            [Hammer.Swipe, { direction: Hammer.DIRECTION_RIGHT}]
        ]
    });

    hammertimeNavbarRight.on("swipe", function (ev) {
        var canvasSlid = navbar.hasClass("canvas-slid");
        if (!canvasSlid) {
            $(".navbar-toggle").click();
        }
    });

    var hammertimeNavbarLeft = new Hammer.Manager(navbar[0], {
        recognizers: [
            [Hammer.Swipe, { direction: Hammer.DIRECTION_LEFT}]
        ]
    });

    hammertimeNavbarLeft.on("swipe", function (ev) {
        var canvasSlid = navbar.hasClass("canvas-slid");
        if (canvasSlid) {
            $(".navbar-toggle").click();
        }
    });
};