JSFiddle - React, Tailwind, and code Playground

by Kyle

HTML

<button class="nav-mobile-switch">Menu</button>
<ul class="site-nav actual-navigation">
    <li class="">blah</li>
    <li class="search-box">blah2</li>
    <li class="dropdown @loginBoxVisibility">stuff</li>
</ul>

CSS

button {
    display: block;
}

ul {
    display: none;
}

JavaScript

$('button.nav-mobile-switch').click(function() {
             $(this).hide();
             $('ul.site-nav.actual-navigation').show();
 });

if ($('ul.site-nav.actual-navigation').css('display') == 'block') {
    $(document).click(function() {
        $('ul.site-nav.actual-navigation').hide();
        $('button.nav-mobile-switch').show();
    });
    $('ul.site-nav.actual-navigation').click( function(e) {
        e.stopPropagation();
        return false;
    });    
}