JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<span style="font-size:30px;cursor:pointer" id="Open_Sidenav">&#9776; open</span>

<!-- Side Navigation -->
<div id="mySidenav" class="sidenav">


    <div class="sidenav-head">
        <div class="close" id="Close_Sidenav">
            fechar
        </div>
        <div class="sidenav-head-txt">
            texto texto
        </div>
    </div>

    <div class="sidenav_menu">MENU 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <div class="sidenav_menu">MENU 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <div class="sidenav_menu">MENU 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

</div>

CSS

.context_menu,
.sidenav_menu {
    padding: 12px 8px;
    cursor: pointer;
    display: block;
    color: #484848;
    border-left: 7px solid #FFFFFF;
}

.context_menu:hover,
.sidenav_menu:hover {
    background: #EEEEEE;
    border-left: 7px solid #0091FF;
}

.sidenav {
    height: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    z-index: 9999;
}

.sidenav .sidenav-head {
    top: 0;
    height: 169px;
    width: 300px;
    background-image: url("../Img/bg-sidenav.png");
}

.sidenav .sidenav-head .close {
    cursor: pointer;
}

.sidenav-head-txt {
    color: #FFFFFF;
    margin: 10px;
    background-color: #000;
}

.sidenav_menu ul {
    display: none;
}

.sidenav_menu ul li {
    margin-left: -30px;
    padding: 12px 8px;
    cursor: pointer;
    display: block;
    color: #484848;
    border-left: 7px solid #EEEEEE;
}

.sidenav_menu ul li:hover {
    background: #EEF2F5;
    border-left: 7px solid #FBBC05;
}


/* Mobile */

@media only screen and (max-width: 550px) {
    .sidenav .sidenav-head .close {
        cursor: none;
    }
    .sidenav_menu {
        padding: 22px 8px;
    }
}

JavaScript

$(document).ready(function() {

    var menuAberto = false;

    // Fecha Sidenav
    function fechaSideNav() {
        $("#mySidenav").hide();
        $(".shadow-full").hide();
        menuAberto = false;
    }
    $("#Close_Sidenav").click(fechaSideNav);

    $(document).click(function(e) {
        if (!menuAberto) return;
        var foraMenu = !$(e.target).closest('#mySidenav')[0];
        if (foraMenu) fechaSideNav();
    })

    // Abre Sidenav
    $("#Open_Sidenav").click(function(e) {
        e.stopPropagation();
        $("#mySidenav").toggle(500);
        menuAberto = true;
        $("body").append('<div class="shadow-full"></div>');
    });

    // Abre sub menu
    $(".sidenav_menu").click(function() {
        $(".sidenav_menu ul").hide();
        $(this).find("ul").slideToggle();
    });
});