📱 (note)

src/hooks/useNoteOverlay.hook.ts

@@ -1,13 +1,21 @@
-import { computed, onMounted } from '@vue/runtime-core'
+import { computed, onMounted, ref } from '@vue/runtime-core'
 
-import { useOverlay } from '@/hooks/useOverlay.hook'
 import { NOTE_WIDTH } from '@/constants/note-width'
+import { useOverlay } from '@/hooks/useOverlay.hook'
 
-const BOOKMARK_WIDTH = 1.5
+const BOOKMARK_WIDTH = 2
+const BOOKMARK_HEIGHT = 2.5
 
 export const useNoteOverlay = (className: string, index: number) => {
-  const { x } = useOverlay()
-  const displayNoteOverlay = computed(() => x.value > index * NOTE_WIDTH)
+  const { x, y, isMobile } = useOverlay()
+  const noteHeight = ref(0)
+  const displayNoteOverlay = computed(() => {
+    if (isMobile.value) {
+      return y.value > index * noteHeight.value
+    } else {
+      return x.value > index * NOTE_WIDTH
+    }
+  })
 
   onMounted(() => {
     const noteElement = document.querySelector(
@@ -17,8 +25,13 @@ export const useNoteOverlay = (className: string, index: number) => {
     if (!noteElement) {
       return
     }
+    noteHeight.value = noteElement.clientHeight
 
-    noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
+    if (isMobile.value) {
+      noteElement.style.top = `${(index + 1) * BOOKMARK_HEIGHT}rem`
+    } else {
+      noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
+    }
   })
 
   return {