add (beta)functional searchbar in home

src/views/Home.vue

@@ -9,8 +9,36 @@
     />
   </div>
   
-  <searchbar/>
+  <!-- <searchbar/> -->
+  <v-layout style="height: 40px;">
+        <v-app-bar scroll-threshold="0"
+            class="mx-auto px-auto"
+            >
+            <v-text-field
+              v-model="searchQuery"
+              @keyup.enter="performSearch"
+              @input="performSearch"
+              density="compact"
+              variant="solo"
+              prepend-inner-icon="mdi-magnify"
+              single-line
+              hide-details
+            ></v-text-field>
+            <v-btn icon>
+                <v-icon>mdi-crosshairs-gps</v-icon>
+            </v-btn>
+        </v-app-bar>
+        
+      </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>
+  <!-- <map/> -->
     <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
@@ -53,6 +81,33 @@ const rotation = ref(0);
 
 const popupData = ref(null);
 
+//search
+const searchQuery = ref("");
+const searchResults = ref([]);
+
+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];
+};
+
+const performSearch = async () => {
+  try {
+    const response = await axios.get(
+      `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);
+  } catch (error) {
+    console.error("Error fetching search results:", error);
+  }
+};
+
+
 //Show API
 const handleMapClick = async event => {
   const clickedCoordinate = event.coordinate;
@@ -84,4 +139,31 @@ const closePopup = () => {
   padding:1px .5em;
   margin-bottom: 8em;
 }
+.search-results {
+  position: absolute;
+  width: 100%;
+  max-height: 200px;
+  height: 300px;
+  overflow-y: auto;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  top: 4em;
+}
+
+.search-results ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.search-results li {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.search-results li:hover {
+  background-color: #f0f0f0;
+}
 </style>