JSFiddle - React, Tailwind, and code Playground

by Forresty

HTML

<nav class="test">
    <ul>
    </ul>
    <div class="navbar_handle">
        <div class="navbar_menu"><span class="menu_icon">CLICK</span>

        </div>
    </div>
</nav>

SCSS

nav {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 3;
    ul {
        font-size: 1em;
        text-transform: uppercase;
        letter-spacing: 0.125em;
        position: relative;
        height: 0;
        background: black;
        overflow: hidden;
        color: white;
        padding: 0;
        text-align: center;
        margin: 0;
        transition: height .2s linear;
        z-index: 4;
    }
    .navbar_handle {
        position: relative;
        width: 100%;
        //border-top: 0.25em solid $accent2;
        background: black;
        box-sizing: border-box;
        display:inline-block;
        vertical-align:middle;
        z-index: 4;
        .navbar_menu {
            font-size: 1.7em;
            line-height: 1.2em;
            width: auto;
            height: 100%;
            float: right;
            padding: 0.3125em;
            margin-right: 0.3em;
            cursor: pointer;
            color: red;
            text-align: center;
            transition: color .3s;
        }
    }
}
.showing {
    height: 12.1875em;
}

JavaScript

$(".navbar_menu").click(function () {
    $("nav ul").toggleClass("showing");
    });