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,

src/views/Home.vue

@@ -1,12 +1,24 @@
 <template>
 
 <div id="app">
-    <router-view />
-    <Popup
+    <router-view
+    class="router-view"
+    />
+
+    <!-- <Popup
       v-if="popupData"
       :nearestStructureData="popupData"
       :onClose="closePopup"
+    /> -->
+
+    <DestinationInfoCard
+    class="DestinationInfoCard"
+      v-if="popupData"
+      :nearestStructureData="popupData"
+      :onClose="closePopup"
+    
     />
+    
   </div>
   
   <!-- <searchbar/> -->
@@ -38,15 +50,6 @@
         
       </v-layout>
 
-      <!-- <div v-if="searchResults.length > 0" class="search-results">
-          <ul>
-             <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
-               {{ result.display_name }}
-             </li>
-          </ul>
-      </div> -->
-
-            
       <v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
         <v-list-item
           v-for="result in searchResults"
@@ -95,6 +98,7 @@ import searchbar from '@/components/searchbar.vue';
 import Popup from "@/components/Popup.vue"; // Import the Popup componen
 import { ref } from "vue";
 import axios from "axios";
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
 
 const center = ref([100.538611, 13.764722]);
 const projection = ref("EPSG:4326");
@@ -189,4 +193,12 @@ const closePopup = () => {
 .search-results li:hover {
   background-color: #f0f0f0;
 }
+
+.router-view{
+  z-index: -15;
+}
+
+.DestinationInfoCard{
+  z-index: 15;
+}
 </style>