Направление движения свайпа

let x = null; 
document.addEventListener('touchstart', e => x = e.touches[0].clientX); 
document.addEventListener('touchmove', e => { 
    if (!x) return; 
    x = x - e.touches[0].clientX < 0 ? 0 : -90; 
    test.style.transform = `translate(${x}%,0)`; 
    x = null; 
});

#test { 
  transition: 0.5s; 
  position: fixed; 
  top: 0px; 
  left: 0px; 
  width: 150px; 
  height: 100px; 
  background: wheat; 
  text-align: center; 
}

<div id="test">menu example<br>swipe left to hide</div>

let lastPos; 
let menu = document.querySelector(".menu"); 
 
window.addEventListener("mousedown", e => { 
  lastPos = e.clientX; 
  window.addEventListener("mousemove", showMenu); 
}); 
 
function showMenu(e){ 
  if(event.buttons == 0){ 
    window.removeEventListener("mousemove", showMenu); 
  }else { 
    menu.style.width = (e.clientX > lastPos) ? "100px" : "0px"; 
  } 
}

.menu{ 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 0px; 
  height: 300px; 
  background-color: cyan; 
  transition: all 1s; 
}

<div class="menu"> 
</div>