From 75b492004b3927915499cd92e6cb1ec458061a62 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 18 Dec 2024 18:22:39 +0100
Subject: [PATCH] #61 Add comments to dynamic vue

---
 .../project/virtual-sample/VirtualSample.vue          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/project/virtual-sample/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
index d8794b0..9d70d4d 100644
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -70,20 +70,21 @@
         }}</span>
       </button>
       <button
-        v-if="activeTab === 'static'"
         id="toggle-comments"
         :aria-pressed="isCommentsOpen"
         class="btn btn--transparent btn--outline"
         data-icon="comment"
         @click="isCommentsOpen = !isCommentsOpen"
       >
-        <span class="sr-only">Afficher les commentaires</span>
+        <span class="sr-only">{{ isCommentsOpen ? 'Masquer' : 'Afficher' }} les commentaires</span>
       </button>
     </template>
+    <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
   </Dialog>
 </template>
 
 <script setup>
+import Comments from "../../comments/Comments.vue";
 import { storeToRefs } from "pinia";
 import Dialog from "primevue/dialog";
 import DynamicView from "./DynamicView.vue";
@@ -116,4 +117,10 @@ watch(isOpen, (newValue) => {
 .dialog__inner {
   padding: var(--space-16);
 }
+.with-comments .dialog__inner {
+  margin-right: var(--dialog-comments-w, 20rem);
+}
+#comments-container {
+  top: var(--dialog-header-h);
+}
 </style>