fix(listener): switch to passive listeners

Author: dvcol

src/components/AppComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NDialogProvider, NDrawer } from 'naive-ui';
-import { onBeforeUnmount, onMounted, ref, Transition, watch } from 'vue';
+import { ref, Transition, watch } from 'vue';
 import { RouterView, useRouter } from 'vue-router';
 
 import GridBackground from '~/components/common/background/GridBackground.vue';
@@ -59,13 +59,6 @@ const onBack = () => {
   if (window.history.state.back) return back();
   return onClose();
 };
-
-onMounted(() => {
-  mainRef.value?.addEventListener('touchstart', NavbarService.hideDrawer);
-});
-onBeforeUnmount(() => {
-  mainRef.value?.removeEventListener('touchstart', NavbarService.hideDrawer);
-});
 </script>
 
 <template>
@@ -96,7 +89,8 @@ onBeforeUnmount(() => {
       <RouterView v-slot="{ Component }">
         <main
           ref="mainRef"
-          :class="{ 'full-height': !isAuthenticated, loading: !Component }"
+          :class="{ 'full-height': !isAuthenticated, 'loading': !Component }"
+          @touchstart.passive="NavbarService.hideDrawer"
         >
           <GridBackground v-if="!Component" :size="20" />
           <Transition name="scale" mode="out-in">

src/components/common/navbar/NavbarComponent.vue

@@ -172,8 +172,8 @@ const onTouchEnd = (e: TouchEvent) => {
     @mouseleave="isHover = false"
     @focusin="isFocus = true"
     @focusout="isFocus = false"
-    @touchend="onTouchEnd"
-    @touchstart="onTouchStart"
+    @touchend.passive="onTouchEnd"
+    @touchstart.passive="onTouchStart"
   >
     <NTabs
       :key="enabledRoutes.join('-')"

src/components/common/numbers/ProgressNumber.vue

@@ -240,8 +240,8 @@ onBeforeUnmount(() => {
     @keydown.up.prevent="onProgress(emitProgress + progressStep)"
     @keydown.down.prevent="onProgress(emitProgress - progressStep)"
     @keydown.esc="onBlur"
-    @touchstart="onClick"
-    @touchend="onClick"
+    @touchstart.passive="onClick"
+    @touchend.passive="onClick"
     @blur="onBlur"
   >
     <span v-if="editing">{{ emitProgress }}</span>

src/components/views/panel/PanelContent.vue

@@ -37,8 +37,8 @@ const onTouchEnd = (e: TouchEvent) => {
 <template>
   <NDrawerContent
     :native-scrollbar="false"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
+    @touchstart.passive="onTouchStart"
+    @touchend.passive="onTouchEnd"
   >
     <!--  Header  -->
     <NFlex justify="space-between" class="panel-header">

src/components/views/panel/PanelTrailers.vue

@@ -56,8 +56,8 @@ const onTouchEnd = (e: TouchEvent) => {
     keyboard
     trigger="hover"
     :space-between="32"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
+    @touchstart.passive="onTouchStart"
+    @touchend.passive="onTouchEnd"
   >
     <slot />
     <YoutubePlayer