toggle destination card (not finished)

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>