JSFiddle - React, Tailwind, and code Playground

by johnny000

HTML

<br>
<br>
<div id="panel">
    <div id="deck">
        <div class="deck active">
            <ul>
                <li class="deck-trigger" data-target="#deck-shoes">Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
        </div>
        <div class="deck" id="deck-shoes">MY SHOES
            <button class="deck-prev">back</button>
        </div>
    </div>
</div>
<button style="float:right" class="toogle-menu">Toogle</button>

CSS

html, body {
    margin:0px;
    padding: 0px;
}
#panel {
    font-family: arial;
    background: #BBB;
}
#panel ul {
    list-style:none;
}
#panel ul li {
    padding:10px;
}
#deck-shoes {
    background:#AAA;
}

JavaScript

$.fn.slideDeck = function (options) {
    var $this = this;
    var plugin = {
        settings: $.extend({
            deckWidth: "100%",
            deckHeight: $this.parent().height()
        }, options),
        previousDeck: null,
        currentDeck: null,
        init: function () {
            $("#deck").css({
                position: "relative",
                overflow: "hidden",
                width: plugin.settings.deckWidth,
                height: plugin.settings.deckHeight
            });
            $(".deck").each(function () {
                var $this = $(this);
                var leftPixel = 0;
                if (!$this.hasClass("active")) {
                    leftPixel = plugin.settings.deckWidth;
                } else {
                    plugin.currentDeck = $this;
                }
                $this.css({
                    position: "absolute",
                    top: 0,
                    left: leftPixel,
                    width: plugin.settings.deckWidth,
                    height: $(window).height()
                });

            });
            $(".deck-trigger").click(function (e) {
                var $target = $($(this).attr("data-target"));
                $target.animate({
                    left: 0
                });
                plugin.previousDeck = plugin.currentDeck;
                plugin.currentDeck = $target;
                console.log($target);
                console.log(plugin);
            });
            $(".deck-prev").click(function (e) {
                plugin.currentDeck.animate({
                    left: plugin.settings.deckWidth
                });
                plugin.currentDeck = plugin.previousDeck;
            });
        }
    }
    plugin.init();
    return plugin;
}
$.fn.navPanel = function (options) {
    var $this = this;
    var plugin = {
        settings: $.extend({
            width: "90%",
            height: $(window).height(),
            position: "absolute",
      ...