JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<div class="sidebar"></div>

JavaScript

$(function () {
    //Simple Sidebar v1.0.3 by DcDeiv https://github.com/dcdeiv
    // GPLv2 http://www.gnu.org/licenses/gpl-2.0-standalone.html
    (function ($) {
        $.fn.simpleSidebar = function (options) {
            //declaring all global variables
            var sbw, align, callbackA, callbackB,


            //allowing user customisation
            defaults = {
                settings: {
                    opener: undefined,
                    wrapper: undefined, //HTML tag is not safe. Please, use a container/wrapper div
                    ignore: undefined,
                    data: 'ssbplugin',
                    animation: {
                        duration: 500, //milliseconds (0.5s = 500ms)
                        easing: 'swing'
                    }
                },
                sidebar: {
                    align: undefined,
                    width: 350, //pixels
                    gap: 64, //pixels
                    closingLinks: 'a',
                    style: {
                        zIndex: 3000
                    }
                },
                mask: {
                    style: {
                        backgroundColor: 'black',
                        opacity: 0.5,
                        filter: 'Alpha(opacity=50)' //IE8 and earlier
                    }
                }
            },
            config = $.extend(true, defaults, options),
                $sidebar = this,
                $opener = $(config.settings.opener),
                $wrapper = $(config.settings.wrapper),
                $ignore = $(config.settings.ignore),
                dataName = config.settings.data,
                duration = config.settings.animation.duration,
                easing = config.settings.animation.easing,
                defAlign = config.sidebar.align,
                sbMaxW = config.sidebar.width,
                gap = config.sidebar.gap,
                $links = config.sidebar.closingLinks,
               ...