<div id="sidebar">
  <ul>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
  </ul>
</div>
<div>
  <button id="close">close</button>
  <button id="open">open</button>
<div>

body {
  background: url(http://unsplash.it/1920/1080) no-repeat center center fixed;
  margin: 0;
  padding: 0;
}

/*
Keep the position of sidebar fixed and set a width
initially sidebar is Collapse and will be opened using
javascript, for a bit animation feel keep transition 0.5s

Set the top:0 and left:-width (width include border size also)
*/
#sidebar {
  position: fixed;
  top: 0;
  left: -206px;
  height: 100vh;
  width: 200px;
  transition: 0.5s;
  
  /*
  Have a look to my backdrop post
  for this cool blur effect
  
  */
  background-color:#ffffff3f;
  backdrop-filter:blur(4px);
  border:3px solid black;
}

/*
Rest of styling stuff is your choice
*/


#sidebar ul {
  position: relative;
  margin-top: 50px;
}
#sidebar ul li {
  font-size: 2em;
  margin-bottom: 30px;
  font-family: monospace;
}

#close {
  display:none;
  position: fixed;
  cursor: pointer;
  top: 10px;
  right: 10px;
  font-size: 1.2em;
}
#open {
  display:block;
  position: fixed;
  cursor: pointer;
  top: 10px;
  right: 10px;
  font-size: 1.2em;
}

const open = document.getElementById('open');
const close = document.getElementById('close');
const sidebar = document.getElementById('sidebar');

open.onclick = () => {
  sidebar.style.left=0;
  open.style.display = 'none';
  close.style.display = 'block';
  
};
close.onclick = () => {
  sidebar.style.left='-206px';
  close.style.display = 'none';
  open.style.display = 'block';
};