<div class="container">
  <div class="control" @click="toggleMenu">
    S/H MENU
  </div>
  <nav class="menu">
    <ul>
      <li>About</li>
      <li>Services</li>
      <li>Contact us</li>
    </ul>
  </nav>
  <div class="content">
    CONTENT
  </div>
</div>

body{
  margin: 0;
  padding: 0;
}

ul, li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.container{
  display: flex;
  color: #ffffff;
  height: 100vh;
  .control{
    padding: 10px;
    background-color:  #3882aa;
    cursor: pointer;
     z-index: 9;
    
  }
  .menu{
    padding: 10px;
    background-color:  #3ccfd3;
    cursor: pointer;
    transition: 1s;
    z-index: 8;
    &__noactive {
      transition: 1s;
      transform: translateX(-100%);
    }
  }
  .content{
    padding: 10px;
    background-color:  #aaefd9;
    cursor: pointer;
    width: 25%;
    
    &__menu {
      &_disabled {
        transform: translateX(-88px)
      }
    }
  }
}

new Vue({
  el: ".container",
  data: {
    menuState: true
  },
  methods: {
    toggleMenu() {
    let swapper = document.querySelectorAll(".menu")[0]
    swapper.classList.toggle("menu__noactive")
    let oldBlock = document.querySelectorAll(".content")[0]
    oldBlock.classList.toggle("content__menu_disabled")
    }
  }
})