<div class="container">
  <div class="content">
    
  <nav id="nav">
    <button onclick="slideNav()" class="nav-btn">Nav</button>
  </nav>
  <article>    
  </article>
  <aside id="sideBar">
    <button onclick="slideSidebar()" class="sidebar-btn">Sidebar</button>
  </aside>
  </div>
</div>

nav,
article,
aside{
  position: relative;
  background-color: #6fa843;
  height: 400px;
  transition: transform 500ms ease-in-out;
}
nav{
  background-color: #96c144;
  z-index: 1;
}
aside{
  background-color: #cde0aa;
  z-index: 1;
}
.container{
  max-width: 1200px;
  margin: 0 auto;
}
.content{
  display: grid;
  grid-template-columns: 300px 600px 300px;
}
.nav-btn,
.sidebar-btn{
  display: none;
  position: absolute;
  right: -105px;
  width: 100px;
  padding: 10px;
  margin-top: 5px;
  background: none;
  border: none;
  border: 2px solid tomato;
  color: white;
  text-transform: uppercase;
}
.sidebar-btn{
  right: auto;
  left: -105px;
}
.slideleft{
  transform: translateX(-300px);
}
.slideright{
  transform: translateX(300px);
}
@media screen and (max-width:1200px){
  .container{
    max-width: 900px;
    overflow: hidden;
  }
  .sidebar-btn{
    display: inline-block;
  }
}
@media screen and (max-width:900px){
  .container{
    max-width: 600px;
    overflow: hidden;
  }
  .nav-btn{
    display: inline-block;
  }
  .content{
    transform: translateX(-300px);
  }
  .content{
  grid-template-columns: 300px 100% 300px;
}
}

// sidebar slider function
function slideSidebar() {
  var element = document.getElementById("sideBar");
  element.classList.toggle("slideleft");
}
// nav slider funciton
function slideNav() {
  var element = document.getElementById("nav");
  element.classList.toggle("slideright");
}