JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<h3 id='clickMe'><span id="arrow">^</span>click</h3>
  <ul id="nav">
    <li>Торт</li>
    <li>Торт</li>
    <li>Торт</li>
  </ul>
</div>

CSS

* {
  margin:0;
  padding:0;
}
#clickMe {
  cursor:pointer;
}

#nav {
  display:none;
}

JavaScript

var el = document.getElementById('clickMe');
el.addEventListener('click', menHidden);
function menHidden() {
	var navBar = document.getElementById('nav');
  if (getComputedStyle(navBar).display == 'none') {
  	navBar.style.display = 'block';
    document.getElementById('arrow').style.transform = 'rotate(0deg)';
  } else {
  	navBar.style.display = 'none';
    document.getElementById('arrow').style.transform = 'rotate(180deg)';
  }
  if
}