<button type="button" id="toggle-menu" aria-expanded="false" aria-label="Menu">
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" fill=#000000;>
        <path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z">
        </path>
    </svg>
</button>

<nav class="nav-menu">
  <ul>
      <li>
          <a href="#">About</a>
      </li>
      <li>
          <a href="#">Projects</a>
      </li>
      <li>
          <a href="#">Contact</a>
      </li>
  </ul>
</nav>

body {
	font-family: monospace;
	font-size: 1.5rem;
}
        
a {
  color: white;
  text-decoration: none;
}

li {
	list-style: none;
	margin-top: 2rem;
}
        
ul {
	padding-left: 0px;
}

button {
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
	cursor: pointer;
  background-color: rgb(211, 211, 211);
}

button:active {
  /* So we know when the button is being clicked */
  background-color: rgb(182, 182, 182);
}

nav {
  position: absolute;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: lightseagreen;
}

.nav-menu {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.nav-menu.expanded {
  opacity: 1;
}

const toggleMenuBtn = document.querySelector("#toggle-menu");
const navMenu = document.querySelector("nav");

toggleMenuBtn.addEventListener("click", function() { 
    navMenu.classList.toggle("expanded");
});