JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <div>
  ASDF ASDF ASDF ASDF ASDF
  </div>
  <ul id="nav_areas">
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
    <li>ITEM 4</li>
  </ul>
  <ul id="nav_etc">
    <li id="nav_etc_search"><input type="search" placeholder="Search..."></li>
  </ul>
  <img id="menu_toggle" src="menu.svg" alt="menu">
</nav>

CSS

nav {
    background-color:#9C27B0;
    text-transform:uppercase;
    text-align:center;
    left:0;
    right:0;
    display:flex;
    color:#fff;
}

#menu_toggle {
        height:1em;
        cursor:pointer;
        order:3;
        display:inline;
    }
    
    nav {
        position:absolute;
        z-index:3;
    }
    
    #nav_areas {
        display:none;
        position:absolute;
        top:0.5em;
        left:0;
        right:0;
        background-color:#fff;
        z-index: -1;
        color:#212121;
    }

JavaScript

document.getElementById('menu_toggle').addEventListener("click", function(){ menuToggle(); });

function menuToggle() {
	if (document.getElementById('nav_areas').style.display == 'none' || document.getElementById('nav_areas').style.display == '') { 
		changeNavAreasVisibility(true);
	} else {
		changeNavAreasVisibility(false);
	}
}

function changeNavAreasVisibility(isVisible) {
	if (isVisible) {
		document.getElementById('nav_areas').style.display = 'initial';
	} else {
		document.getElementById('nav_areas').style.display = 'none';
	}
}