JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<div class="container">
<div class="menu-wrapper hidden">
    <div class="text-center v-center" >
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#" id="closeMenu" class="text-danger toggleMenu">Close<span class="close-icon">&times;</span></a></li>
            <li><a href="#" >Menu Item 1</a></li>
            <li><a href="#" >Menu Item 2</a></li>
            <li><a href="#" >Menu Item 3</a></li>
        </ul>
    </div>
</div>

<button type="button" class="toggleMenu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
 </button>
      
</div>

CSS

.container {
    padding:10px;
}
.menu-wrapper {
    position:fixed;
    height:100%;
    width:100%;
    background-color:#222;
    top:0;
    left:0;
}
.bar {
    display:block;
    width:15px;
    padding:2px;
    margin:2px;
    border-radius:2px;
    background-color:#444;  
}

.v-center {
    text-align:center;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}
.close-icon {
    padding:0 10px;
}

JavaScript

var menuopened = false;
$('.toggleMenu').click(function() {
    var menuWrapper =$('.menu-wrapper');
    if(menuWrapper.hasClass('hidden')) {
       menuWrapper.removeClass('hidden');   
    }
    else {
       menuWrapper.addClass('hidden');   
    }
});