Fix navbar auth status and avatar size

The changes protect nav elements with auth checks and increase the
profile avatar size for better visibility.

app/components/NavBar.vue

@@ -1,6 +1,10 @@
 <template>
     <!-- Toolbar at the top of the screen -->
-    <v-app-bar color="rgba(27, 94, 32, 0.8)" height="48">
+    <v-app-bar
+        color="rgba(27, 94, 32, 0.8)"
+        height="48"
+        v-if="status === 'authenticated'"
+    >
         <!-- Title of the application with adjusted margin and font size -->
         <v-app-bar-title class="text-h6 ms-3 text-white">
             <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
@@ -18,8 +22,8 @@
 
     <v-navigation-drawer v-model="drawer" temporary>
         <v-list-item
-            :prepend-avatar="data.image ? data.image : ''"
-            :title="data.name ? data.name : ''"
+            :prepend-avatar="data && data.image ? data.image : ''"
+            :title="data && data.name ? data.name : ''"
         ></v-list-item>
 
         <v-divider></v-divider>
@@ -44,7 +48,7 @@
 <script setup>
 import { ref, capitalize } from "vue";
 const drawer = ref(false);
-const { data } = useAuth();
+const { data, status } = useAuth();
 </script>
 
 <style></style>

app/pages/profile.vue

@@ -2,7 +2,7 @@
     <v-container
         class="fill-height d-flex flex-column align-center justify-center text-center"
     >
-        <v-avatar color="primary" size="62">
+        <v-avatar color="primary" size="170">
             <img :src="data.image ? data.image : ''" :alt="data.name" />
         </v-avatar>
         <h3 class="mt-10">Último login:</h3>