JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar-app">
      <ul class="menu-app">
        <li class="list-menu">
          <a href="#">Home</a>
        </li>
        <li class="list-menu">
          <a href="#">Menu</a>
          <ul class="menu-nested">
            <li class="list-nested">
              <a href="#">Dash2</a>
            </li>
          </ul>
        </li>
        <li class="list-menu">
          <a href="#">Menu</a>
          <ul class="menu-nested">
            <li class="list-nested">
              <a href="#">Dash2</a>
            </li>
          </ul>
        </li>
        <li class="list-menu">
          <a href="#">Menu</a>
          <ul class="menu-nested">
            <li class="list-nested">
              <a href="#">Dash2</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

CSS

body{
  margin: 0px;
  padding:0px ;
}
.sidebar-app{
  width:14em;
  min-height: 100vh;
  background: red;
}

.sidebar-app .menu-app{
  padding:0;
}

.sidebar-app .menu-app .list-menu{
  list-style: none;
}
.sidebar-app .menu-app .list-menu a{
  color:white;
  display: block;
  line-height: 45px;
}

.sidebar-app .menu-app .menu-nested{
  display: none;
}

.block{
  display: block !important;
}

.none{
  display: none;
}

JavaScript

var nested = document.getElementsByClassName('menu-nested');
  var list = document.querySelectorAll('.list-menu a');
  for (i = 0; i < list.length; i++) {
      list[i].addEventListener('click', toggleItem, false);
  }
  function toggleItem() {
      var itemClass = this.parentNode.className;
      for (i = 0; i < nested.length; i++) {
          nested[i].className = 'menu-nested none';
      }
      if (itemClass == 'list-menu') {
          this.nextElementSibling.classList.toggle('block');
      }
  }