JSFiddle - React, Tailwind, and code Playground

HTML

<div id="controller">
  <button id="clicker">
  Click me
  </button>
</div>
<div id="content">
<nav>
  <a href="#">Home</a>
  <a href="#">Portfolio</a>
  <a href="#">Contact</a>
</nav>
<div>
Lorem ipsum sit dolor amet etc
</div>
</div>

CSS

#controller {
  display: inline-block;
  width: 100px;
  position: relative;
  border-right: 2px solid black;
}
button {
  margin: 15px auto;
}
#content {
  display: inline-block;
  overflow: hidden;
}
#content div, nav {
  display: block;
}
nav {
  width: 100%;
  background-color: #ccc;
}
nav a {
  padding: 15px;
}
#content div {
  margin-top: 15px;
  margin-left: 15px;
}
.moved {
  margin-left: 150px;
}

JavaScript

const nav = document.getElementsByTagName("nav")[0];
const btn = document.getElementById("clicker");

btn.addEventListener("click",moveHeader);

function moveHeader() {
	let wd = window.innerWidth;
  console.log(wd);
  if(wd < 789) {
  	nav.classList.toggle("moved");
  } else {
  	nav.classList.remove("moved");
  }
}

window.addEventListener("resize", function() {
	if(this.innerWidth > 789) {
  	nav.classList.remove("moved");
  }
});