Guams/my_book_list_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout d'icones font awesome

Browse Source
This commit is contained in:
Guamss 2025-12-11 16:03:02 +01:00
parent a332d1bbc5
commit b36e3981ba
4 changed files with 418 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

657
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -12,6 +12,11 @@
"lint": "eslint . --fix" "lint": "eslint . --fix"
}, },
"dependencies": { "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", "axios": "^1.13.2",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"vue": "^3.5.17", "vue": "^3.5.17",

37
src/App.vue
View File

@ -51,12 +51,15 @@ watch(isAuthenticated, () => {
</div> </div>
<div class="nav-signin-div"> <div class="nav-signin-div">
<RouterLink v-if="!isAuthenticated" class="nav-link" to="/login">Se connecter</RouterLink> <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> <div class="user-section" v-else>
<div class="clickable-user-section">
<img class="profile-picture" :src="API_URL + authenticatedUser?.profile_picture"></img> <img class="profile-picture" :src="API_URL + authenticatedUser?.profile_picture"></img>
<span>{{ authenticatedUser?.username }}</span> <span>{{ authenticatedUser?.username }}</span>
</div> </div>
<a @click="handleLogout" class="nav-link logout">
<font-awesome-icon icon="arrow-right-from-bracket" />
</a>
</div>
</div> </div>
</nav> </nav>
<RouterView /> <RouterView />
@ -65,20 +68,36 @@ watch(isAuthenticated, () => {
<style> <style>
@import "styles.css"; @import "styles.css";
.user-section { .logout {
border-radius: 6px;
padding-bottom: 4px;
padding-top: 4px;
padding-right: 8px;
padding-left: 8px;
cursor: pointer; cursor: pointer;
}
.logout:hover {
transition: 0.5s;
color: red;
}
.user-section {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
} }
.user-section:hover { .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); background-color: light-dark(white, #5e5e5e);
} }

7
src/main.ts
View File

@ -3,5 +3,10 @@ import App from './App.vue'
import ToastPlugin from 'vue-toast-notification' import ToastPlugin from 'vue-toast-notification'
import { router } from './routes' import { router } from './routes'
import 'vue-toast-notification/dist/theme-sugar.css' 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')