Show sidebar only after clicking some highlighted text

client/src/components/content-blocks/ContentComponent.vue

@@ -30,6 +30,7 @@ import { constructContentComponentBookmarkMutation } from '@/helpers/update-cont
 import { useMutation } from '@vue/apollo-composable';
 import { HighlightNode } from '@/__generated__/graphql';
 import * as Mark from 'mark.js';
+import highlightSidebar from '@/helpers/highlight-sidebar';
 
 export interface Props {
   component: any;
@@ -209,6 +210,14 @@ const markHighlights = () => {
     ];
     instance.markRanges(ranges, {
       className: `highlight highlight--${highlight.color}`,
+      each: (newMark) => {
+        newMark.dataset.id = highlight.id;
+        console.log(newMark);
+        newMark.addEventListener('click', () => {
+          console.log('clicked');
+          highlightSidebar.open();
+        });
+      },
     });
   }
 };
@@ -223,6 +232,7 @@ onMounted(() => {
 .highlight {
   background-color: Highlight;
   color: HighlightText;
+  cursor: pointer;
 
   &--alpha {
     background-color: var(--mark-alpha);

client/src/components/highlights/HighlightSidebar.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="highlight-sidebar">
-    <div class="highlight-sidebar__close-button">
+    <div
+      class="highlight-sidebar__close-button"
+      @click="close"
+    >
       <cross class="highlight-sidebar__close-icon" />
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__highlight">
@@ -17,7 +20,7 @@
       <pre>{{ highlightMark?.clientHeight }}</pre>
     </div>
     <div class="highlight-sidebar__section highlight-sidebar__note">
-      <h2 class="b">Meine Notiz</h2>
+      <h2 class="heading-4">Meine Notiz</h2>
       <div class="form-with-border highlight-sidebar__note-form">
         <textarea
           class="borderless-textarea"
@@ -32,6 +35,9 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref } from 'vue';
 
+const emits = defineEmits(['close']);
+const close = () => emits('close');
+
 const highlightMark = ref<HTMLElement | null>(null);
 
 const overflowing = computed(() => {

client/src/helpers/highlight-sidebar.ts

@@ -0,0 +1,26 @@
+import { createApp } from 'vue';
+import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
+import autoGrow from '@/directives/auto-grow';
+export default {
+  open() {
+    const app = document.getElementById('app');
+    const mountEl = document.createElement('div');
+    console.log(app);
+    app?.appendChild(mountEl);
+
+    const cleanUp = () => {
+      mountEl?.parentNode?.removeChild(mountEl);
+      sidebar.unmount();
+    };
+
+    const sidebar = createApp(HighlightSidebar, {
+      onClose() {
+        cleanUp();
+      },
+    });
+
+    sidebar.directive('auto-grow', autoGrow); // todo: can this be done a different way? maybe use this declaration inside the component itself
+
+    sidebar.mount(mountEl);
+  },
+};

client/src/layouts/DefaultLayout.vue

@@ -5,7 +5,6 @@
   >
     <navigation-sidebar />
     <profile-sidebar />
-    <highlight-sidebar />
     <header-bar
       class="header layout__header"
       v-if="showHeader"
@@ -28,7 +27,6 @@ import HeaderBar from '@/components/HeaderBar.vue';
 import ProfileSidebar from '@/components/profile/ProfileSidebar.vue';
 import DynamicFooter from '@/layouts/DynamicFooter.vue';
 import NavigationSidebar from '@/components/book-navigation/NavigationSidebar.vue';
-import HighlightSidebar from '@/components/highlights/HighlightSidebar.vue';
 
 export default {
   components: {
@@ -36,7 +34,6 @@ export default {
     ProfileSidebar,
     NavigationSidebar,
     DynamicFooter,
-    HighlightSidebar,
   },
 
   computed: {