From 098be04c6461d52fa0ffd351df379b67dee1ee24 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Wed, 7 Apr 2021 22:24:03 +0200
Subject: [PATCH] :lipstick: (breadcrumb)

---
 src/hooks/useNoteOverlay.hook.ts | 17 ++++++++++++-----
 src/hooks/useOverlay.hook.ts     |  3 +--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useNoteOverlay.hook.ts b/src/hooks/useNoteOverlay.hook.ts
index 1425b17..2be7a78 100644
--- a/src/hooks/useNoteOverlay.hook.ts
+++ b/src/hooks/useNoteOverlay.hook.ts
@@ -1,4 +1,4 @@
-import { computed, onMounted, ref } from '@vue/runtime-core'
+import { computed, onMounted, ref, watch } from '@vue/runtime-core'
 
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
@@ -33,10 +33,17 @@ export const useNoteOverlay = (className: string, index: number) => {
       noteElement.style.top = `0`
     } else {
       noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
-      noteElement.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value
-        .length -
-        index) *
-        BOOKMARK_WIDTH}rem)`
+
+      const stackedNoteContainers = document.querySelectorAll(
+        '.stacked-note'
+      ) as NodeListOf<HTMLElement>
+
+      stackedNoteContainers.forEach((stackedNote, ind) => {
+        stackedNote.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value
+          .length -
+          ind) *
+          BOOKMARK_WIDTH}rem)`
+      })
     }
   })
 
diff --git a/src/hooks/useOverlay.hook.ts b/src/hooks/useOverlay.hook.ts
index f916258..520f3a6 100644
--- a/src/hooks/useOverlay.hook.ts
+++ b/src/hooks/useOverlay.hook.ts
@@ -1,10 +1,9 @@
 import { computed, ref } from 'vue'
 import { useEventListener, useWindowSize } from '@vueuse/core'
-
 import { MOBILE_BREAKPOINT } from '@/constants/mobile'
 
 export const useOverlay = (listen = true) => {
-  const body = document.querySelector('body') as HTMLBodyElement
+  const body = document.body
   const x = ref(0)
   const y = ref(0)
   const { width } = useWindowSize()