JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<nav class="modal modal-vertical modal-right" id="modal">
     <h1>CONTENT</h1>

</nav>
	<h1 id="showRight">OPEN</h1>

	<h1 id="hideRight">CLOSE</h1>

<script>
    var
    menuRight = document.getElementById('modal'),
        body = document.body;


    showRight.onclick = function() {
        classie.removeClass(hideRight, 'active');
        classie.addClass(this, 'active');
        classie.addClass(menuRight, 'modal-open');
        disableOther('showRight');
    };
    hideRight.onclick = function() {
        classie.removeClass(showRight, 'active');
        classie.addClass(this, 'active');
        classie.removeClass(menuRight, 'modal-open');
        disableOther('showRight');
    };

    function disableOther(button) {
        if (button !== 'showRight') {
            classie.toggle(showRight, 'disabled');
        }
    }
</script>

CSS

/* General styles for all menus */
 .modal {
    background: yellow;
    position: fixed;
    margin-left:20px;
}
h1 {
    margin-left:20px;
}
/* Orientation-dependent styles for the content of the menu */
 .modal-vertical {
    width: 60%;
    height: 100%;
    top: 0;
    z-index: 1000;
}
.modal-right {
    right: -60%;
}
.modal-open {
    right: 0px;
}
/* Push classes applied to the body */
 .modal-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
/* Transitions */
 .modal, .modal-push {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

JavaScript

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */

(function (window) {

    'use strict';

    // class helper functions from bonzo https://github.com/ded/bonzo

    function classReg(className) {
        return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
    }

    // classList support for class management
    // altho to be fair, the api sucks because it won't accept multiple classes at once
    var hasClass, addClass, removeClass;

    if ('classList' in document.documentElement) {
        hasClass = function (elem, c) {
            return elem.classList.contains(c);
        };
        addClass = function (elem, c) {
            elem.classList.add(c);
        };
        removeClass = function (elem, c) {
            elem.classList.remove(c);
        };
    } else {
        hasClass = function (elem, c) {
            return classReg(c).test(elem.className);
        };
        addClass = function (elem, c) {
            if (!hasClass(elem, c)) {
                elem.className = elem.className + ' ' + c;
            }
        };
        removeClass = function (elem, c) {
            elem.className = elem.className.replace(classReg(c), ' ');
        };
    }

    function toggleClass(elem, c) {
        var fn = hasClass(elem, c) ? removeClass : addClass;
        fn(elem, c);
    }

    window.classie = {
        // full names
        hasClass: hasClass,
        addClass: addClass,
        removeClass: removeClass,
        toggleClass: toggleClass,
        // short names
        has: hasClass,
        add: addClass,
        remove: removeClass,
        toggle: toggleClass
    };

})(window);