function scrolling(event) {
  let scrollPercent =
    (event.target.scrollTop /
      (scrollableElement.value.scrollHeight -
        scrollableElement.value.clientHeight)) *
    100;
}

window.addEventListener("scroll", function () {
  let st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > window.innerHeight / 2 && st > lastScrollTop) {
    isMenuOpen.value = false;
  } else if (st > window.innerHeight / 2 && st < lastScrollTop) {
    isMenuOpen.value = true;
  }
  lastScrollTop = st <= 0 ? 0 : st;
});

function storeTouchPosition() {
  initialTouchPosition.value = event.touches[0].clientY;
  // initialBottomPosition.value =
  //   draggableElement.value.getBoundingClientRect().bottom;
}
function resizeSublinks() {
  document.body.style.overflow = "hidden";
  let delta = event.touches[0].clientY - initialTouchPosition.value;
  let maxScrollDistance = draggableElement.value.scrollHeight - 130;
  let top = draggableElement.value.getBoundingClientRect().top;

  if (delta > 0) {
    //element is being dragged down
    if (draggableElement.value && top <= 392) {
      draggableElement.value.style.transform = `translateY(${delta}px)`;
    }
  } else if (draggableElement.value && delta * -1 <= maxScrollDistance) {
    draggableElement.value.style.transform = `translateY(${delta}px)`;
  }
}
function stopDragging() {
  document.body.style.overflow = "auto";
  initialTouchPosition.value = null;
}