JSFiddle - React, Tailwind, and code Playground

HTML

<header id='header'> <!-- Table Row 1 -->
  <div id="header-table">
    <div id='back'>
      <button id='back-button'>&#8592;</button>
    </div>
    <div id="title">
      <h1 id='title-h1'>Title</h1>
    </div>
    <div id="menu">
      <button id='menu-button'>&equiv;</button>
    </div>
  </div>
</header>

<nav id="menu-nav">
  <a href="#intro">Introductory Page</a>
  <a href="#list">Activity List</a>
  <a href="#settings">Settings</a>
  <a href="#about">About</a>
</nav>

<div id="body"> <!-- Table Row 3 -->

  <div id="wrapper">
    body
  </div>
</div>

<button id="toggle">click here to toggle nav</button>

CSS

header#header {
  position: relative;
  display: table-row;
}

div#menu-nav-cell {
  position: relative;
  display: table-row;
  text-align: center;
  overflow: hidden;
  background: yellow;
}

nav#menu-nav {
  display: table-row;
  height: 0em;
  width: 100%;
  color: #000;
  background: pink;
}

div#body {
  position: relative;
  display: table-row;
  height: 100%;
}

div#wrapper {
  position: relative;
  height: 100%;
}




/* new rules that I added */
nav#menu-nav {
  line-height: 1em;
  -webkit-transition: line-height .2s, background-color .2s;
}

nav#menu-nav a {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    -webkit-transition: height .2s;
}

nav#menu-nav.hidden {
    line-height: 0em;
    background-color: transparent;
}
nav#menu-nav.hidden a {
    height: 0;
}

JavaScript

document.getElementById("toggle").onclick = function () {
    document.getElementById("menu-nav").classList.toggle("hidden");
}