Icônes + CSS et intégration Backend

src/App.vue

@@ -1,5 +1,20 @@
 <script setup lang="ts">
 import { RouterView, RouterLink } from 'vue-router'
+import { ref, provide, onMounted } from 'vue'
+import { checkUser } from '@/utils/discord'
+import type { Ref } from 'vue'
+import type { User } from '@/utils/discord'
+
+// État de l'utilisateur et de son avatar
+const user: Ref<User | null> = ref(null)
+const avatar = ref('')
+
+provide('user', user) // Fournit l'utilisateur aux composants enfants
+
+onMounted(async () => {
+    user.value = await checkUser() // Vérifie l'authentification lors du montage du composant
+    avatar.value = user.value ? `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}?size=48` : ''
+})
 </script>
 
 <template>
@@ -12,6 +27,7 @@ import { RouterView, RouterLink } from 'vue-router'
             <router-link to="/">Index</router-link>
             <p>|</p>
             <router-link to="/discord">Discord</router-link>
+            <img v-if="user" :src=avatar>
         </nav>
     </header>
 
@@ -50,6 +66,10 @@ nav * {
     margin-left: 20px;
 }
 
+nav img {
+    border-radius: 20%;
+}
+
 h1 {
     text-align: center;
     left: 0;