app.js

var pageWidth = window.innerWidth || document.body.clientWidth;
var treshold = Math.max(1, Math.floor(0.01 * (pageWidth)));
var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;

const limit = Math.tan(45 * 1.5 / 180 * Math.PI);
const gestureZone = document.getElementById('sidebar_swipe');

gestureZone.addEventListener('touchstart', function (event) {
  touchstartX = event.changedTouches[0].screenX;
  touchstartY = event.changedTouches[0].screenY;
}, false);

gestureZone.addEventListener('touchend', function (event) {
  touchendX = event.changedTouches[0].screenX;
  touchendY = event.changedTouches[0].screenY;
  handleGesture(event);
}, false);

function handleGesture(e) {
  var x = touchendX - touchstartX;
  var y = touchendY - touchstartY;
  var xy = Math.abs(x / y);
  var yx = Math.abs(y / x);
  if (Math.abs(x) > treshold || Math.abs(y) > treshold) {
    if (yx <= limit) {
      if (x < 0) {
        document.getElementById("sidebar").classList.remove('active');
        console.log("left");
      } else {
        document.getElementById("sidebar").classList.add('active');
        console.log("right");
      }
    }
    if (xy <= limit) {
      if (y < 0) {
        console.log("top");
      } else {
        console.log("bottom");
      }
    }
  } else {
    console.log("tap");
  }
}