JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<div id="sk">
    <div id="handle" class="vertical-text">Handle</div>
    <div id="main">
        
    </div>
</div>

CSS

#sk {
    width: 200px;
    height: 260px;
    display: block;
    position: fixed;
    left: 0px;
    top: 100px;
}

#main {
    overflow: hidden;
    min-height: 260px;
    background-color: #aabbcc;
}

#handle {
    float: right;
    width: 16px;
    min-height: 260px;
    background-color: Black;
    color: White;
    font: 14px Arial;
    font-weight: bold;
}

.vertical-text {
	-ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    text-align: center;
    cursor: pointer;
}

JavaScript

(function($) {
    var x = [
        { title: "Group 1", items: [ 
            { name: "Item 1", url: "http://www.google.com/search?q=item1" },
            { name: "Item 2", url: "http://www.google.com/search?q=item2" },
            { name: "Item 3", url: "http://www.google.com/search?q=item3" }
        ] },
        { title: "Group 2", items: [ 
            { name: "Item 1", url: "http://www.google.com/search?q=item1" },
            { name: "Item 2", url: "http://www.google.com/search?q=item2" },
            { name: "Item 3", url: "http://www.google.com/search?q=item3" }
        ] },
        { title: "Group 3", items: [ 
            { name: "Item 1", url: "http://www.google.com/search?q=item1" },
            { name: "Item 2", url: "http://www.google.com/search?q=item2" },
            { name: "Item 3", url: "http://www.google.com/search?q=item3" }
        ] }
    ];
    var sk = $("#sk").css({
        "left": "-184px"
    });
    var handle = $("#handle").click(function(e, ui) {
        sk.animate({ "left": (Number(sk.css("left").replace("px", "")) < 0 ? "0px" : "-184px") }, 800);
    });
    var main = $("#main");
    
    $.each(x, function(i, v) {
        var d = $("<div>").css({
            "width": "100%",
            "height": "26px",
            "display": "inline-block"
        });
        var dt = $("<div>").css({
            "width": "100%",
            "height": "26px",
            "backgroundColor": "Gray",
            "font-weight": "bold",
            "padding": "2px"
        }).append(v.title).appendTo(d);
        $.each(v.items, function(key, value) {
            var dl = $("<div>").css({
                "padding-left": "10px",
                "backgroundColor": "#ccc"
            }).append($("<a>").attr("href", value.url).text(value.name)).appendTo(d);
        });
        main.append(d);
    });
    
    for (z = 0; z < 200; z++) {
        $("body").append("<p>This is line number " + z + "!</p>");
    }
}(jQuery));