JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<div id="page" class="iphone4">
    <aside id="navigation">
        <div class="overlay"></div>
        <ul>
            <li><a href="">Shop</a>

            </li>
            <li><a href="">Blog</a>

            </li>
            <li><a href="">Contact</a>

            </li>
        </ul>
    </aside>
    <div id="content">
        <header id="header">
            <div id="mobile-menu-trigger"> <span></span>
 <span></span>
 <span></span>

            </div>
        </header>
        <main id="main">
            <p>Hello World.</p>
        </main>
    </div>
</div>

SCSS

$azure: lighten(#007FFF, 20%);
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    overflow: hidden;
}
body {
    font-family: helvetica;
}
#page {
    position: relative;
    &.iphone4 {
        width: 640px;
        height: 960px;
        background: #444;
    }
}
#navigation {
    height: 100%;
    width: 200px;
    position: absolute;
    left: -200px;
    background: darken(#444, 10%);
    .overlay {
        background: #000;
        opacity: 0.8;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    ul {
        li {
            a {
                display: block;
                padding: 8px;
                border-bottom: 1px solid lighten(#444, 2%);
                text-decoration: none;
                color: #fff;
            }
        }
    }
}
#content {
    &.on-hold {
        opacity: 0.5;
        transition: 0.5s all;
    }
    #header {
        position: relative;
        z-index: 99;
        background: linear-gradient($azure, darken($azure, 10%));
        border-bottom: 3px solid darken($azure, 13%);
        padding: 10px;
        #mobile-menu-trigger {
            padding: 5px;
            border-radius: 3px;
            background: #444;
            width: 30px;
            cursor: pointer;
            span {
                height: 5px;
                display: block;
                background: #fff;
                margin-top: 3px;
                border-radius: 1px;
                &:first-child {
                    margin-top: 0;
                }
            }
        }
    }
    #main {
        padding: 20px;
    }
}

JavaScript

(function (document, jQuery) {

    var $page = $('#page'),
        $content = $('#content'),
        $navigationOverlay = $('#navigation .overlay');

    $(document).on('click', '#mobile-menu-trigger', function () {

        if ($page.is(':animated')) return;

        var $pageOffset = $page.offset();

        if ($pageOffset.left <= 0) {

            $navigationOverlay.fadeOut('fast');
            $content.addClass('on-hold');

            // slide over
            $page.animate({
                left: 200
            }, {
                duration: 200,
                queue: false
            });
        } else {

            $navigationOverlay.fadeIn('slow');
            $content.removeClass('on-hold');

            // slide back
            $page.animate({
                left: 0
            }, {
                duration: 200,
                queue: false
            });
        }

    });

})(document, jQuery);