JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="nav">
    <ul class="nav-items">
        <li class="nav-item">
            <a href="#!" class="nav-item-link">Home</a>
        </li>
        <li class="nav-item">
            <a href="#!" class="nav-item-link">About</a>
        </li>
        <li class="nav-item">
            <a href="#!" class="nav-item-link">Services</a>
        </li>
        <li class="nav-item">
            <a href="#!" class="nav-item-link">Blog</a>
        </li>
        <li class="nav-item">
            <a href="#!" class="nav-item-link">Contact</a>
        </li>
    </ul>
</div>


<div class="grid">
    <div class="grid-cell menu">
        <div class="logo"> My awesome website </div>
        <button class="nav-toggler">Menu</button>
    </div>
    <div class="grid-cell sidebar"></div>
    <div class="grid-cell content"></div>
    <div class="grid-cell footer"></div>
</div>

SCSS

// import fonts
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,700');
// define variables
$font: 'Titillium Web',
sans-serif;
$color: #9c067f;
$body: #efefef;
// reset browser
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: $font;
}

body {
    background: $body;
}

.grid {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 50px calc(100vh - 160px) 50px;
    grid-template-areas: "menu menu" "sidebar content" "footer footer";
    grid-gap: 30px;
    width: 90%;
    margin: auto;
    .grid-cell {
        border-radius: 4px;
        padding: 15px 20px;
    }
    .menu {
        grid-area: menu;
        background: $color;
    }
    .sidebar {
        grid-area: sidebar;
        background: darken($body, 5%);
    }
    .content {
        grid-area: content;
        background: lighten($body, 100%);
    }
    .footer {
        grid-area: footer;
        background: darken($color, 10%);
    }
}

// menu
.menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
    * {
        color: #fff;
        cursor: pointer;
    }
    
    .nav-toggler {
        background: transparent;
        line-height: 20px;
        width: 20px;
        display: block;
        text-align: center;
        border: none;
        text-indent: 9999px;
        transition: transform 0.2s ease-in;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        outline: none;
        
        &:before {
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: calc(80% - 4px);
          top:10%;
          left:0;
          border: none;
          border-top: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transition: all 0.2s ease-in-out;
        }
        
        &:after {
          content: '';
          display: block;
          width:...

JavaScript

$('.nav-toggler').on('click', function() {

    if ($(this).hasClass('opened')) {
        $(this).removeClass('opened');
        $('.nav').addClass('is-closing');
        setTimeout(function() {
            $('.nav').removeClass('opened is-closing');
        }, 500);
    } else {
        $(this).addClass('opened');
        $('.nav').addClass('opened');
    }

});

var delay = 50;

$('.nav-item').each(function() {
    $(this).css('animation-delay', delay + "ms");

    delay += 50;
});