создаю телегу товаров

pages/product/[id].vue

@@ -1,14 +1,54 @@
 <template>
-  <div class="product">
-    <ProductImages />
-    <ProductDescription />
+  <div ref="target" class="product">
+    <UDrawer
+      v-model:open="open"
+      title="Drawer with title"
+      :class="{ animated: !isSwiping }"
+      :style="{ top }"
+    >
+      <ProductImages />
+
+      <template #body>
+        <ProductDescription />
+      </template>
+    </UDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { UseSwipeDirection } from '@vueuse/core'
+import { useSwipe } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+const open = ref(false)
+const target = shallowRef<HTMLElement | null>(null)
+const targetHeight = computed(() => target.value?.offsetHeight)
+const top = shallowRef('0')
+
+const { isSwiping, lengthY } = useSwipe(
+  target,
+  {
+    passive: false,
+    onSwipe(e: TouchEvent) {
+      if (targetHeight.value) {
+        if (lengthY.value > 200) {
+          open.value = true
+        }
+      }
+    },
+    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+      console.log('lengthY.value', lengthY.value)
+      if (lengthY.value > 200 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
+        open.value = true
+      }
+    },
+  },
+)
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .product {
   width: 100%;
   display: flex;