<aside id="sidebar">
  <h2>Menu</h2>
  <nav id="navigation">
    <a href="#">najma</a>
    <a href="#">najma</a>
    <a href="#">najma</a>
    <a href="#">najma</a>
    <a href="#">najma</a>
  </nav>
</aside>

<div id="wrapper">
  <header id="header">
    <h1>Menu | Nav</h1>
  </header>
</div>

/* www.najmacode.com */
html,
body {
  overflow-x: hidden;
}

/* wrapper styles */
[id="wrapper"] {
  position: relative;
  min-height: 100vh;
}


/* small screens styles */
@media (max-width: 767px) {
  [id="sidebar"] {
    position: absolute;
    top: 0;
    width: 50vw;
    min-height: 100vh;
  }
  [id="wrapper"] {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
    will-change: transform;
  }
  /* here's goes the slide effect */
  [id="wrapper"]:not(.is-closed) {
    -webkit-transform: translateX(50vw);
    transform: translateX(50vw);
  }

  /* Button deco */
  [id="wrapper"] > button {
    display: block;
    z-index: 1;
    height: 3.5rem; width: 3.5rem;
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, right top, from(#333), to(#333)), -webkit-gradient(linear, left top, right top, from(#333), to(#333)), -webkit-gradient(linear, left top, right top, from(#333), to(#333));
    background-image: -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333), -webkit-linear-gradient(left, #333, #333);
    background-image: linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    -webkit-background-size: 3.5rem .9rem;
            background-size: 3.5rem .9rem;
    padding: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
}

/* Global deco */
* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1.6em;
  font-family: "Century Gothic", helvetica, arial, sans-serif;
}
a {
  color: #fff;
}
[id="sidebar"] {
  padding-top: 1em;
  background: #333;
  color: #ddd;
}
[id="sidebar"] h2 {
  text-align: center;
  margin-top: 0;
}
[id="navigation"] a {
  display: block;
  padding: .7em;
  margin-bottom: 2px;
  text-decoration: none;
  background: rgba(255,255,255, 0.1);
}
[id="wrapper"] {
  padding: 2rem;
  background-color: #eee;
  color: #333;
}

 var maxBreakpoint = 767;  
var targetID = 'wrapper';  

 var n = document.getElementById(targetID);

 n.classList.add('is-closed');

 function navi() {
   if (window.matchMedia("(max-width:" + maxBreakpoint + "px)").matches && document.getElementById("toggle-button") == undefined) {
    n.insertAdjacentHTML('afterBegin', '<button id="toggle-button" aria-label="open/close navigation"></button>');
    t = document.getElementById("toggle-button");
    t.onclick = function () {
      n.classList.toggle('is-closed');
    }
  }
   var minBreakpoint = maxBreakpoint + 1;
  if (window.matchMedia("(min-width: " + minBreakpoint + "px)").matches && document.getElementById("toggle-button")) {
    document.getElementById("toggle-button").outerHTML = "";
  }
}
navi();
 window.addEventListener('resize', navi);