ajout d'icones font awesome

package.json

@@ -12,6 +12,11 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/vue-fontawesome": "^3.1.2",
     "axios": "^1.13.2",
     "jwt-decode": "^4.0.0",
     "vue": "^3.5.17",

src/App.vue

@@ -5,13 +5,13 @@ import { User } from './models/user';
 import { onMounted, ref, watch } from 'vue';
 import { AuthenticationService } from './services/authentication.service';
 
-  const authenticatedUser = ref<User | undefined>(undefined)
-  const API_URL = import.meta.env.VITE_MBL_API_URL
-  const { isAuthenticated, logout } = useAuth();
-  const toastService = useToast();
-  const authenticationService = new AuthenticationService();
+const authenticatedUser = ref<User | undefined>(undefined)
+const API_URL = import.meta.env.VITE_MBL_API_URL
+const { isAuthenticated, logout } = useAuth();
+const toastService = useToast();
+const authenticationService = new AuthenticationService();
 
-  const fetchUser = async () => {
+const fetchUser = async () => {
   if (isAuthenticated.value) {
     try {
       authenticatedUser.value = await authenticationService.findMe();
@@ -31,14 +31,14 @@ watch(isAuthenticated, () => {
   fetchUser();
 });
 
-  function handleLogout() {
-    logout();
-    toastService.info('Vous êtes maintenant déconnecté', {
-        position: 'bottom-right',
-        pauseOnHover: true,
-        dismissible: true,
-    });
-  }
+function handleLogout() {
+  logout();
+  toastService.info('Vous êtes maintenant déconnecté', {
+    position: 'bottom-right',
+    pauseOnHover: true,
+    dismissible: true,
+  });
+}
 </script>
 
 <template>
@@ -51,35 +51,54 @@ watch(isAuthenticated, () => {
     </div>
     <div class="nav-signin-div">
       <RouterLink v-if="!isAuthenticated" class="nav-link" to="/login">Se connecter</RouterLink>
-      
-      <!-- <a v-else @click="handleLogout" class="nav-link" style="cursor:pointer">Se déconnecter</a> -->
       <div class="user-section" v-else>
-        <img class="profile-picture" :src="API_URL + authenticatedUser?.profile_picture"></img>
-        <span>{{ authenticatedUser?.username }}</span>
+        <div class="clickable-user-section">
+          <img class="profile-picture" :src="API_URL + authenticatedUser?.profile_picture"></img>
+          <span>{{ authenticatedUser?.username }}</span>
+        </div>
+        <a @click="handleLogout" class="nav-link logout">
+          <font-awesome-icon icon="arrow-right-from-bracket" />
+        </a>
       </div>
     </div>
   </nav>
-  <RouterView/>
+  <RouterView />
 </template>
 
 <style>
 @import "styles.css";
 
-.user-section {
-  border-radius: 6px;
-  padding-bottom: 4px;
-  padding-top: 4px;
-  padding-right: 8px;
-  padding-left: 8px;
+.logout {
   cursor: pointer;
+}
+
+.logout:hover {
+  transition: 0.5s;
+  color: red;
+}
+
+.user-section {
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
 }
 
-.user-section:hover {
-  background-color: light-dark(white, #5e5e5e);
+.clickable-user-section {
+  border-radius: 6px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  padding-right: 8px;
+  padding-left: 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.clickable-user-section:hover  {
+   background-color: light-dark(white, #5e5e5e); 
 }
 
 .profile-picture {

src/main.ts

@@ -3,5 +3,10 @@ import App from './App.vue'
 import ToastPlugin from 'vue-toast-notification'
 import { router } from './routes'
 import 'vue-toast-notification/dist/theme-sugar.css'
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faArrowRightFromBracket } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-createApp(App).use(router).use(ToastPlugin).mount('#app')
+library.add(faArrowRightFromBracket);
+
+createApp(App).use(router).use(ToastPlugin).component("font-awesome-icon", FontAwesomeIcon).mount('#app')