JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menucontainer">
<nav id="mobilemenu">
    <ul>
        <li><span class="menutrigger">&#9776; Menu</span></li>
    </ul>
</nav>
<nav id="fullmenu">
    <ul>
        <li><a href="page1.html" target="content">Menu Item 1</a></li>
        <li><a href="page2.html" target="content">Menu Item 2</a></li>
        <li><a href="page3.html" target="content">Menu Item 3</a></li>
        <li><a href="page4.html" target="content">Menu Item 4</a></li>
    </ul>
</nav>
</div>
<div id="frame">
        <iframe name="content" id="content" src="intro.html"></iframe>
</div>

CSS

#fullmenu{
    display:none
}

JavaScript

$(document).ready(function() {
    $("a[target='content']").click(function() {
        if ($("#mobilemenu").css("display") == "block" ){
            $('#fullmenu').hide();
        }
    });
    $('html').click(function() {
    $('#fullmenu').hide();
});
    $('#content').contents().click(function(){
        $('#fullmenu').hide();
    });
    $('#menucontainer').click(function(event){
        event.stopPropagation();
    });
    $('.menutrigger').click(function() {
        $('#fullmenu').toggle();
    });
});