Save chosen milestone to store and route to chosen milestone

src/components/milestone/ActiveMilestoneDisplay.vue

 <script setup lang="ts">
 import ProgressBar from "@/components/ProgressBar.vue";
+import {useMilestoneStore} from "@/stores/currentMilestone";
+import router from "@/router";
 
 const props = defineProps({
   id: Number,
@@ -14,8 +16,11 @@ const props = defineProps({
 const imageUrl = "src/assets/pig.png"
 
 const openMilestone = () => {
-  console.log("Open dialog")
+  useMilestoneStore().setMilestoneId(props.id)
+  router.push("/path")
 }
+
+
 </script>
 
 <template>
@@ -52,5 +57,6 @@ const openMilestone = () => {
   flex-direction: column;
   place-content: space-between;
   gap: 2.5%;
+  transition: 0.3s;
 }
 </style>
\ No newline at end of file

src/components/milestone/CompletedMilestoneDisplay.vue

 <script setup lang="ts">
+import {ref} from "vue";
+
 const props = defineProps({
   id: Number,
   title: String,
@@ -11,22 +13,25 @@ const props = defineProps({
 });
 
 const imageUrl = "src/assets/pig.png"
-function openMilestone(){
-  console.log("Open milestone")
-}
+const displayDescription = ref(false)
+
 </script>
 
 <template>
 <div class="completed-milestone-display"
-     @click="openMilestone"
+     @mouseover="displayDescription = true"
+      @mouseleave="displayDescription = false"
      :style="{
             backgroundImage: image ? 'url(' + image + ')' : 'url(' + imageUrl + ')'
         }">
   <h2 class="title">{{props.title}}</h2>
-  <div class="info">
+  <div class="info" v-if="!displayDescription">
   <h4  v-if="currentSum">Du sparte {{props.currentSum}}kr</h4>
     <h4 v-if="deadline">{{props.deadline.getDate()}}/{{props.deadline.getMonth()}}-{{props.deadline.getFullYear()}}</h4>
   </div>
+  <div class="info" v-if="displayDescription">
+    <h4>{{props.description}}</h4>
+  </div>
 
 
 </div>

src/views/HomePage/MilestoneView.vue

@@ -220,6 +220,7 @@ flex-direction: column;
 
 .active-milestone:hover{
   transform: scale(1.02);
+  transition: 0.3s;
 }
 
 .right{
@@ -259,6 +260,7 @@ flex-direction: column;
 
 .completed-milestone:hover{
   transform: scale(1.05);
+  transition: 0.3s;
 }
 
 .pagination {
@@ -278,6 +280,7 @@ flex-direction: column;
 }
 
 .pagination button:hover {
+  transition: 0.3s;
   transform: scale(1.05);
 }
 
@@ -303,6 +306,7 @@ flex-direction: column;
 }
 
 .page-numbers button:hover {
+  transition: 0.3s;
   transform: scale(1.05);
 }