JSFiddle - React, Tailwind, and code Playground

by jcml

HTML

<body>
    <div class="menu">
        <div class="links home center">
            <ul>BLA</ul>
        </div>
    </div>
    <div class="ico i1 hidden">
        <div class="close-ico">
            <div class="stripe"></div>
            <div class="stripe"></div>
        </div>
    </div>
    <div class="ico i2 corner">
        <div class="menu-ico">
            <div class="stripe"></div>
            <div class="stripe"></div>
            <div class="stripe"></div>
        </div>
    </div>
    <div class="menu m1 corner">
        <div class="links center">
            <ul>
                <li class="toSub colapsed t1" data-open="t1">
                    <a>Architecture</a>
                    <ul>
                        <li class="toSlide" data-open=".s1">bla</li>
                        <li class="toSlide" data-open=".s2">bla</li>
                        <li class="toSlide" data-open=".s3">bla</li>
                        <li class="toSlide" data-open=".s4">blablablablablabla</li>
                    </ul>
                </li>
                <li class="toSub colapsed t2" data-open="t2">
                    <a>Coding</a>
                    <ul>
                        <li class="toSlide" data-open=".s5">bla</li>
                        <li class="toSlide" data-open=".s6">bla</li>
                        <li class="toSlide" data-open=".s7">bla</li>
                        <li class="toSlide" data-open=".s8">blablablablablabla</li>
                    </ul>
                </li>
                <li class="toSub colapsed t3" data-open="t3">
                    <a>Thesis</a>
                    <ul>
                        <li class="toSlide" data-open=".s9">bla</li>
                        <li class="toSlide" data-open=".s10">blablablablablabla</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="ico i3 hidden">
        <div class="menu-ico">
            <div class="stripe"></div>
            <div...

CSS

html, body {
    background: rgba(20,20,20,1);
    overflow: hidden;
    position: relative;
}

.menu, .slide, .ico {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    height: 100%;
    width: 100%;
}

.menu, .slide, .ico {
    -webkit-transition: all ease 1.5s;
    -moz-transition: all ease 1.5s;
    -ms-transition: all ease 1.5s;
    -o-transition: all ease 1.5s;
    transition: all ease 1.5s;
}

.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
    display: none;
}

.i2, .m1 {
    right: 0;
    top: 0;
    margin-top: 0;
}

.m1 {
    margin-right: 0;
}

.i2 {
    margin-right: -51px;
}

.i3, .slide, .m2 {
    top: 0;
    margin-top: 0;
    left: 0;
    margin-left: 0;
}

.i3 {
    margin-left: -51px;
}

.m1.corner {
    right: 100%;
    margin-right: 0;
    top: 100%;
    margin-top: -51px;
}

.m2.corner {
    left: 100%;
    margin-left: 0px;
    top: 100%;
    margin-top: -51px;
}

.i1.corner {
    left: 100%;
    margin-left: -51px;
    bottom: 100%;
    margin-bottom: -51px;
}

.i1.hidden {
    left: 100%;
    margin-left: 0;
    bottom: 100%;
    margin-bottom: 0;
}

.i2.corner {
    right: 100%;
    margin-right: -51px;
    top: 100%;
    margin-top: -51px;
}

.i3.corner {
    left: 100%;
    margin-left: -51px;
    top: 100%;
    margin-top: -51px;
}

.i3.hidden, .slide.hidden, .m2.hidden {
    left: 100%;
    margin-left: 0;
    top: 100%;
    margin-top: 0;
}

ul {
    padding: 0;
    margin: 0;
}

.menu > .links {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    height: 100%;
    border-width: 1px;
    border-color: black;
}

.home {
    color: rgba(255,255,255,.25);
    cursor: default;
    font-size: 2em;
    padding: 15px;
    margin: 5px;
}

.links ul {
    position: relative;
}

.center ul {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform:...

JavaScript

var main = function() {

    var $currentSub;
    var $currentSlide;
    var state;
    var tState;

    var Xcorner = function (x) {
        x.toggleClass('hidden', false).toggleClass('corner', true).toggleClass('full', false);
        console.log(x," to corner");
    };

    var Xhidden = function (x) {
        x.toggleClass('hidden', true).toggleClass('corner', false).toggleClass('full', false);
        console.log(x," to hidden");
    };

    var Xshow = function (x) {
        x.toggleClass('hidden', false).toggleClass('corner', false).toggleClass('full', false);
        console.log(x," to show");
    };

    var Xfull = function (x) {
        x.toggleClass('hidden', false).toggleClass('corner', false).toggleClass('full', true);
        console.log(x," to show");
    };

    var Xreset = function() {
        switch (state) {
            case 1:
                Xhidden($('.i1'));
                Xcorner($('.m1'));
                Xcorner($('.i2'));
                Xhidden($('.i3'));
                Xhidden($('.m2'));
                state = 0;
                break;
            case 2:
                Xcorner($('.m2'));
                Xcorner($('.i3'));
                state = 1;
                break;
        }
    }

    $('.i1').click(function() {
        console.log("Clicked close!");
        Xreset();
    });

    $('.i2').click(function() {
        console.log("Clicked menu button!");
        Xcorner($('.i1'));
        Xshow($('.m1'));
        Xfull($('.i2'));
        Xcorner($('.i3'));
        Xcorner($('.m2'));
        state = 1;
    });

    $('.i3').click(function() {
        console.log("Clicked menu button!");
        Xshow($('.m2'));
        Xfull($('.i3'));
        state = 2;
    });

    $('.toSub > a').click(function() {

        if (tState == $(this).parent().data("open")) {
            $(this).parent().toggleClass('colapsed');
            $currentSub = undefined;
            tState = undefined;
        }
        else {
            if...