JSFiddle - React, Tailwind, and code Playground

HTML

<nav role="nav" class="navbar">
    <div class="menu">close sidebar</div>
</nav>

<nav role="nav" class="sidebar">
    sidebar menu
</nav>

<main role="main" class="main-page">
    main content
</main>

CSS

.menu {
    display: table !important;
    background-color: red;
    padding:10px;
    width:auto;
    cursor:pointer;
}

.sidebar {
    color: #fff;
    width: 240px;
    height: 100%;
    position: fixed;
    background: #2a3542;
}

.main-page {
    color: #000;
    margin-left: 240px;
    position :relative;
}

JavaScript

$(function () {
        $('.menu').on('click', function () {
            if ($('.sidebar').is(':visible')) {
                $('.sidebar').animate({'width': '0px'}, 'slow', function () {
                    $('.sidebar').hide();
                });
                $('.main-page').animate({'padding-left': '0px'}, 'slow');
                $('.menu').html('open sidebar');
            } else {
                $('.sidebar').show();
                $('.sidebar').animate({'width': '240px'}, 'slow');
                $('.main-page').animate({'padding-left': '240px'}, 'slow');
                $('.menu').html('close sidebar');
            }
        });
    });