JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type='text/css'>
/* your custom CSS \*/
</style>
<!-- access to the HEAD element -->
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<style>
</style>


<div id="sideNav">
    <ul>
        <li class="a"> <a href="#"><i class="fa fa-cab fa-2x"></i></a>

        </li>
        <li class="b"> <a href="#"><i class="fa fa-comments-o fa-2x"></i></a>

        </li>
        <li class="c"> <a href="#"><i class="fa fa-book fa-2x"></i></a>

        </li>
    </ul>
</div>

CSS

body { position: relative; }

#sideNav {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    height: 100%;
    background: #333;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#sideNav ul, #sideNav ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#sideNav i {
    color: #fff;
}
#sideNav a {
    padding: 20px;
    display: block;
}
#sideNav a:hover {
    background: #444;
}
#sideNav a:active {
    background: #d84141;
}

JavaScript

$(function() {
 
    var sideNav = $('#sideNav');
var body = $('html');

var sideNav_width = sideNav.outerWidth( true );
sideNav.css({
    left: -sideNav_width
});

//Enable swiping...
body.add( sideNav ).swipe({
    //Generic swipe handler for all directions
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {

        sideNav_animate( direction );
        
    },
    threshold: 75
});


function sideNav_animate( direction ) {
    
    var sn_animate = {};
    var body_animate = {};
    
    if ( direction == "right" ) {
        sn_animate.left = 0;   
        body_animate.left = sideNav_width;
    }
    else {
        sn_animate.left = -sideNav_width;
        body_animate.left = 0;
    }
    
    sideNav.stop().animate( sn_animate, 400 );
    body.stop().animate( body_animate, 400 );

}
    
    
   
    sideNav.find('a').on("click", function() {
    
        $('<div>'+ $(this).parent().attr('class') +'</div>').appendTo('body');
    
    });

});