toggle destination card (not finished)

src/components/DestinationInfoCard.vue

@@ -1,16 +1,10 @@
 <template>
-  <v-img 
-  class="image"
-  src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
-  cover
-  ></v-img>
-  
   <v-card 
   class="stick-bottom card-height"
   width="100%"
   height="60vh"
   style="padding-top: 15px; font-weight:bold;"
-  :title="destination.title" 
+  :title="nearestStructureData.display_name" 
   :subtitle="destination.subTitle"
   >
 
@@ -59,7 +53,9 @@
         ดูเส้นทาง</v-btn>
     </v-card-actions>
 
-    <v-btn :to="{name: 'favorite'}" variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
+    <v-btn 
+    @click="closePopup"
+    variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
 
 
   </v-card>
@@ -92,6 +88,26 @@ const detial = [
 ]
 </script>
 
+<script>
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+      this.onClose();
+    },
+  },
+};
+</script>
+
 <style>
 .stick-bottom {
   position: fixed;

src/components/Popup.vue

@@ -8,6 +8,9 @@
 </template>
 
 <script>
+
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
+
 export default {
   props: {
     nearestStructureData: Object,