Add animation

client/src/components/circle/CircleOverview.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+// inspiration https://vuejs.org/examples/#modal
 import {Circle} from '@/services/circle';
 
 const props = defineProps<{
-  circle: Circle
+  circle: Circle,
+  show: boolean
 }>()
 
 const emits = defineEmits(['closemodal'])
@@ -10,8 +12,10 @@ const emits = defineEmits(['closemodal'])
 </script>
 
 <template>
-  <Teleport to="body">
-    <div class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full">
+  <Transition mode="in-out">
+    <div
+      v-if="show"
+      class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full">
       <div
         class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
         @click="$emit('closemodal')"
@@ -50,7 +54,7 @@ const emits = defineEmits(['closemodal'])
       </ul>
 
     </div>
-  </Teleport>
+  </Transition>
 </template>
 
 <style scoped>

client/src/views/CircleView.vue

@@ -26,11 +26,13 @@ onMounted(async () => {
 
 <template>
   <div>
-    <Transition mode="out-in">
-    <div v-if="circleStore.page === 'OVERVIEW'">
-      <CircleOverview :circle="circleStore.circle" @closemodal="circleStore.page = 'INDEX'"/>
-    </div>
-    </Transition>
+    <Teleport to="body">
+      <CircleOverview
+        :circle="circleStore.circle"
+        :show="circleStore.page === 'OVERVIEW'"
+        @closemodal="circleStore.page = 'INDEX'"
+      />
+    </Teleport>
   <Transition mode="out-in">
     <div v-if="circleStore.page === 'LEARNING_CONTENT'">
       <LearningContent :key="circleStore.currentLearningContent.translation_key"/>