tom.biard
/
ScienceQuest
3
0
Fork 2
Code Issues 3 Pull Requests Packages Projects 1 Releases Wiki Activity

faire un dropdown (dropstart) "Mon compte" dans la barre

Browse Source
front
Gwenael PLANCHON 1 year ago
parent 497d727f06
commit 50df738902
1 changed files with 76 additions and 58 deletions
Show Stats Download Patch File Download Diff File

134
science-quest/src/components/Titre.vue
Unescape View File

@ -2,74 +2,92 @@
import { NOM_APP } from "@/assets/const";
import { Utilisateur } from "@/data/utilisateur";
export default{
data(){
return{
nomApp:NOM_APP,
utilisateur:{},
estConnecte:false,
}
},
methods:{
changerDarkMode: function(){
document.body.dataset.bsTheme!="dark" ? document.body.dataset.bsTheme="dark" : document.body.dataset.bsTheme="light"
}
},
mounted(){
Utilisateur.utilisateurConnecte().then(user=>{
this.estConnecte=user!=null
this.utilisateur=user
})
export default {
data() {
return {
nomApp: NOM_APP,
utilisateur: {},
estConnecte: false,
}
},
methods: {
changerDarkMode: function () {
document.body.dataset.bsTheme != "dark" ? document.body.dataset.bsTheme = "dark" : document.body.dataset.bsTheme = "light"
}
},
mounted() {
Utilisateur.utilisateurConnecte().then(user => {
this.estConnecte = user != null
this.utilisateur = user
})
}
}
</script>
<template>
<!-- logo temporaire
<!-- logo temporaire
<img alt="Vue logo" src="@/assets/logo.png" />
-->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<router-link class="navbar-brand" to="/">{{ nomApp }}</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!--li class="nav-item">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<router-link class="navbar-brand" to="/">{{ nomApp }}</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- cote gauche -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!--li class="nav-item">
TODO : trouver un moyen de gerer la page courante
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li-->
<li class="nav-item">
<router-link class="nav-link" to="/">Accueil</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/partie">Créer une partie</router-link>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Jeux
</a>
<ul class="dropdown-menu">
<li><router-link class="dropdown-item" to="/pendu">Pendu</router-link></li>
<li><router-link class="dropdown-item" to="/kahoot">Kahoot</router-link></li>
<li><hr class="dropdown-divider"></li>
<li><router-link class="dropdown-item disabled" to="/qui_est_ce">Qui-est-ce</router-link></li>
</ul>
</li>
</ul>
</div>
<button id="boutondarkmode" class="btn" v-on:click="changerDarkMode">💡</button>
<div v-if="!estConnecte">
<router-link class="nav-link" to="/login">Se connecter</router-link>
<li class="nav-item">
<router-link class="nav-link" to="/">Accueil</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/partie">Créer une partie</router-link>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Jeux
</a>
<ul class="dropdown-menu">
<li><router-link class="dropdown-item" to="/pendu">Pendu</router-link></li>
<li><router-link class="dropdown-item" to="/kahoot">Kahoot</router-link></li>
<li>
<hr class="dropdown-divider">
</li>
<li><router-link class="dropdown-item disabled" to="/qui_est_ce">Qui-est-ce</router-link></li>
</ul>
</li>
</ul>
<!-- cote droit -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<button id="boutondarkmode" class="btn" v-on:click="changerDarkMode">💡</button>
<li class="nav-item dropstart">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ utilisateur ? utilisateur?.pseudo : "Mon compte" }}
</a>
<ul class="dropdown-menu">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<div v-if="!estConnecte">
<li><router-link class="dropdown-item" to="/login">Se connecter</router-link></li>
<li><router-link class="dropdown-item" to="/login">Se connecter en tant qu'invité</router-link></li>
</div>
<li>
<hr class="dropdown-divider">
</li>
<li><router-link class="dropdown-item disabled" to="/qui_est_ce">Qui-est-ce</router-link></li>
</ul>
</li>
<div v-if="estConnecte">
<router-link class="nav-link" to="/profil">{{ utilisateur.pseudo }}</router-link>
</div>
</ul>
</div>
</div>
<div v-if="estConnecte">
<router-link class="nav-link" to="/profil">{{ utilisateur.pseudo }}</router-link>
</div>
</div>
</nav>
</nav>
</template>
<style scoped>
</style>
<style scoped></style>
Write Preview
Loading…
Cancel
Save