Navbar and some fix to weather

src/App.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import MainDashboard from "@/components/MainDashboard.vue";
+import NavBar from "@/components/NavBar.vue";
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125"/>
-    <p><b>HEADER</b></p>
+    <NavBar/>
     <!-- TODO: A text input for users to enter the name of a city. -->
     <!-- TODO: A search button to trigger the data fetching process. -->
     <!-- TODO: an homepage to show instead of the dashboard if no city selected -->
-    
   </header>
 
-  <main>
+  <main class="mt-10 mx-1">
     <MainDashboard/>
   </main>
 </template>

src/components/MainDashboard.vue

@@ -40,15 +40,16 @@ function timestampToISO(timestamp: number): string {
 </script>
 
 <template>
-  <p><b>MAIN BODY</b></p>
   <div>
     <div>
-      <p><b>Search</b></p>
-      <n-input v-model:value="city" type="text" placeholder="City"/>
-      <n-input v-model:value="country" type="text" placeholder="Country"/>
-      <n-button type="primary" @click="searchClicked" :loading="searchLoading">
-        Search
-      </n-button>
+      <form @submit.prevent="searchClicked">
+        <p><b>Search</b></p>
+        <n-input v-model:value="city" type="text" placeholder="City"/>
+        <n-input v-model:value="country" type="text" placeholder="Country"/>
+        <n-button attr-type="submit" type="primary" :loading="searchLoading">
+          Search
+        </n-button>
+      </form>
     </div>
     <div v-show="weather.placeFound.length > 0">
       <p><b>Found</b></p>
@@ -67,6 +68,7 @@ function timestampToISO(timestamp: number): string {
       <p><b>Weather: {{ weather.nowWeather.weather[0].main }}
         <img v-if="weather.nowIcons !== null"
              :src="weather.nowIcons['4x']"
+             class="bg-gray-300"
              alt="Weather Icon"/>
       </b></p>
       <p>Temperature: {{ weather.nowWeather.main.temp }} K</p>
@@ -76,6 +78,7 @@ function timestampToISO(timestamp: number): string {
       <n-button type="error" @click="weather.resetGeo()">Clear</n-button>
     </div>
   </div>
+  <p v-for="i in 50" :key="i">TEST {{i}}</p>
 </template>
 
 <style scoped>

src/components/NavBar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import { useWeatherStore } from "@/stores/weather.ts";
+
+const weather = useWeatherStore();
+
+const cityName = computed(() => {
+  if(weather.geo == null) return 'None';
+  return `${weather.geo.name}, ${weather.geo.country}`
+})
+</script>
+
+<template>
+  <div class="bg-blue-400 border-gray-200 w-full flex flex-wrap items-center justify-between px-2 mx-auto fixed z-30 start-0 top-0 h-10">
+    <div class="flex items-center">
+      <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="32" height="32"/>
+      <span class="font-bold">Meteo Vue</span>
+    </div>
+    <span>Nome Citta: {{cityName}}</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/stores/weather.ts

@@ -29,16 +29,17 @@ export const useWeatherStore = defineStore('weather', () => {
     placeFound.value = res.data;
   }
 
-  async function updateGeo(geo: Geo) {
+  async function updateGeo(inGeo: Geo) {
     weatherLoading.value = true;
     try {
       [
         nowWeather.value,
         forecast.value
       ] = await Promise.all([
-        fetchNow(geo),
-        fetchForecast(geo),
+        fetchNow(inGeo),
+        fetchForecast(inGeo),
       ]);
+      geo.value = inGeo;
     } catch (e) {
       console.error(e);
     } finally {
@@ -49,6 +50,7 @@ export const useWeatherStore = defineStore('weather', () => {
   async function resetGeo() {
     nowWeather.value = null;
     forecast.value = [];
+    geo.value = null;
   }
 
   async function fetchNow(geo: Geo) {