hide search bar after search

src/views/Home.vue

@@ -14,6 +14,8 @@
         <v-app-bar scroll-threshold="0"
             class="mx-auto px-auto"
             >
+            
+            <div class="flex-grow-1">
                 <v-text-field
                   v-model="searchQuery"
                   @keyup.enter="performSearch"
@@ -23,15 +25,19 @@
                   prepend-inner-icon="mdi-magnify"
                   single-line
                   hide-details
+                  
                 ></v-text-field>
-            <v-btn icon>
+            </div>
+
+            <v-btn icon @click="showSearchBar = !showSearchBar">
                 <v-icon>mdi-crosshairs-gps</v-icon>
             </v-btn>
+
         </v-app-bar>
         
       </v-layout>
 
-      <div v-if="searchResults.length > 0" class="search-results">
+      <div v-if="!hideSearchResults && searchResults.length > 0" class="search-results">
         <ul>
           <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
             {{ result.display_name }}
@@ -84,14 +90,15 @@ const popupData = ref(null);
 //search
 const searchQuery = ref("");
 const searchResults = ref([]);
+const showSearchBar = ref(false);
+const hideSearchResults = ref(true);
+
 
 const moveToLocation = (result) => {
-  // Extract latitude and longitude from the selected result
   const lat = parseFloat(result.lat);
   const lon = parseFloat(result.lon);
-
-  // Update the center coordinates to move the camera to the selected location
   center.value = [lon, lat];
+  hideSearchResults.value = true;
 };
 
 const performSearch = async () => {
@@ -100,14 +107,14 @@ const performSearch = async () => {
       `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}`
     );
 
-    // Process the search results and limit to, let's say, 5 results
     searchResults.value = response.data.slice(0, 5);
+
+    hideSearchResults.value = false;
   } catch (error) {
     console.error("Error fetching search results:", error);
   }
 };
 
-
 //Show API
 const handleMapClick = async event => {
   const clickedCoordinate = event.coordinate;