JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="">
<div class="navbutton" data-id="news">News</div>
<div class="navbutton" data-id="ankuendigungen">Ankündigungen</div>
<div class="navbutton" data-id="termine">Termine</div>
</div>
<div class="content" data-id="news" style="background: #d32f2f;">
news
</div>
<div class="content" data-id="ankuendigungen" style="background: #7b1fa2;">
ankuendigungen
</div>
<div class="content" data-id="termine" style="background: #303f9f;">
termine
</div>

CSS

html,body
{
  height:100%;
  width: 100%;
  padding:0;
  margin:0;
  font-family: sans-serif;
}
#nav
{
  height: 100%;
  width: 100%;
  position:absolute;
  top: 0;
  left: 0;
  background: #444;
  text-align:center;
  z-index: 10;
  transition: all 500ms ease;
}
#nav.minified
{
  height :75px;
}
.content
{
  height: 75px;
  width: 100%;
  position:absolute;
  top: 0;
  left: 0;
  color:#fff;
  z-index: 1;
  transition: all 1500ms ease;
}
.content.show
{
  height: calc(100% - 75px);
  top: 75px;
}
.navbutton
{
  cursor:pointer;
  border: 1px solid #444;
  background: #f3f3f3;
  padding: 1%;
  width: 25%;
  margin: 15px auto;
  height: 20%;
  transition: all 500ms ease;
}

#nav.minified .navbutton
{
  display: inline-block;
}

JavaScript

document.querySelectorAll('.navbutton').forEach(function(elem) {
    elem.addEventListener('click', function() {
    		var toShow = this.getAttribute("data-id"); // welcher Inhalt muss angezeigt werden?
        var nav = document.getElementById("nav");
        var timeOut = 1500; // animationszeit im CSS
        if (!nav.classList.contains('minified')) {
            nav.classList.add('minified'); // navbar einfahren
            timeOut = 5; // ganz zu beginn müssen wir nicht warten
        }
        
        
        document.querySelectorAll('.content').forEach(function(contentElem) {
            var dataid = contentElem.getAttribute("data-id");
            contentElem.classList.remove('show'); // alle container ausblenden
            if (dataid == toShow) {
                var todoElem = contentElem;
                window.setTimeout(function() {
                    todoElem.classList.add('show'); // den zielcontainer ausfahren
                    todoElem.style.zIndex = "5";
                }, timeOut);

            }
        });
    });
});