JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<button class="btn btn-dark np-trigger" data-target="#menu">Menu</button>

<nav id="menu" class="bg-dark navigation-menu np-collapsible">
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
</nav>

CSS

.np-collapsible:not(.np-expanded) {
  display: none;
}

.np-transitioning {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}

.navigation-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 4rem;
  left: 1rem;
  width: 270px;
}

JavaScript

var button = document.querySelector('.np-trigger');
var menu = document.querySelector(button.dataset.target);

button.addEventListener('click', function(event) {
	expand();
}, false);

function expand() {
	if (isTransitioning()) {
  	// Don't do anything during a transition
  	return;
  }
  
	// Restore menu visibility
  // Enable transition and set height to 0
	menu.classList.replace('np-collapsible','np-transitioning');
    // Retrieve the height of the menu
  var targetHeight = menu.scrollHeight + 'px';
  
    if (menu.classList.contains('np-expanded')) {
    // It's already expanded, time to contract.
    targetHeight = 0;
            menu.classList.remove('np-expanded');
    button.setAttribute('aria-expanded', false);
  }
	
    menu.style.height = targetHeight;

	menu.addEventListener('transitionend', function(event) {
  console.log('transitionend')
  	// Disable transition
    if(targetHeight!==0){
      // Indicate that the menu is now expanded
      menu.classList.add('np-expanded');
      button.setAttribute('aria-expanded', true);
    }
  	menu.classList.replace('np-transitioning','np-collapsible');

		
  }, {once: true});


	// Set the height to execute the transition
}

function isTransitioning() {
	if (menu.classList.contains('np-transitioning')) {
		return true;
	}

	return false;
}