add js to drawer (overlay & drag to close)

assets/css/mobileDrawer.css

@@ -10,6 +10,7 @@
   padding-bottom: rem-convert(42px);
   border-radius: rem-convert(20px) rem-convert(20px) 0px 0px;
   @apply transition-transform translate-y-full;
+  z-index: 20;
   &:before {
     content: "";
     position: absolute;
@@ -43,4 +44,15 @@
   @screen md {
     display: none;
   }
+
+  &-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--grey);
+    mix-blend-mode: multiply;
+    z-index: 10;
+  }
 }

assets/js/mobileDrawer.js

@@ -1,23 +1,60 @@
 export default function MobileDrawer() {
   const toggleDrawers = document.querySelectorAll('[data-drawer-toggle]');
   const closeDrawers = document.querySelectorAll('[data-drawer-close]');
+  const drawers = document.querySelectorAll('.MobileDrawer');
 
   toggleDrawers.forEach(function (drawer) {
     drawer.addEventListener('click', () => {
       if (!drawer.dataset?.drawerToggle) return;
-      console.log({ data: drawer.dataset?.drawerToggle });
       const currentDrawer = document.querySelector(drawer.dataset.drawerToggle);
-      console.log({ currentDrawer });
 
       if (!currentDrawer) return;
-      currentDrawer.classList.toggle('MobileDrawer-show');
+      openDrawer(currentDrawer);
     });
   });
   closeDrawers.forEach(function (drawer) {
     drawer.addEventListener('click', () => {
       const parent = drawer.closest('.MobileDrawer');
       if (!parent) return;
-      parent.classList.remove('MobileDrawer-show');
+      closeDrawer(parent);
     });
   });
+
+  drawers.forEach(function (drawer) {
+    let startY;
+
+    drawer.addEventListener('touchstart', function (event) {
+      startY = event.touches[0].clientY;
+    });
+
+    drawer.addEventListener('touchmove', function (event) {
+      let moveY = event.touches[0].clientY;
+      let diffY = moveY - startY;
+
+      if (diffY > 50) {
+        // close drawer after 50px
+        drawer.classList.remove('MobileDrawer-show');
+      }
+    });
+  });
+}
+
+function openDrawer(currentDrawer) {
+  const isOpen = currentDrawer.classList.toggle('MobileDrawer-show');
+  toggleOverlay(isOpen);
+}
+
+function closeDrawer(currentDrawer) {
+  currentDrawer.classList.remove('MobileDrawer-show');
+  toggleOverlay(false);
+}
+
+function toggleOverlay(open) {
+  if (open) {
+    const div = document.createElement('div');
+    div.classList.add('MobileDrawer-overlay');
+    document.body.prepend(div);
+    return;
+  }
+  document.querySelector('.MobileDrawer-overlay').remove();
 }