JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu" id="theMenu">
    <div class="menu-wrap">
        <h1 class="logo">LOGO</h1>
        <i class="icon-remove menu-close"></i>
<div id="menu-list" class='disabled'>
        <a class="menu-item" href="#headerwrap">HOME</a>
        <a class="menu-item" href="#information">INFO</a>
        <a class="menu-item" href="#portfolio">Portfolio</a>
        </div>
    </div>

    <!-- Menu button -->
    <div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>

CSS

.disabled {
   
}

.logo {
    border: solid black 2px;
}
}

JavaScript

$('#menu-list').hide();
$(document).on('click', function(e) {
    var $menu = $('#menu-list');
    var c = $(e.target).attr('class');
    if(c==='menu-item') {
        return;
    }
    if(c==="logo") {
       $menu.toggleClass('disabled');
    } else {
        $menu.addClass('disabled');
    }
    if($menu.hasClass('disabled')) {
        $menu.slideUp(500);
    } else {
        $menu.slideDown(500);
    }          
});