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

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

@ -2,23 +2,23 @@
import { NOM_APP } from "@/assets/const"; import { NOM_APP } from "@/assets/const";
import { Utilisateur } from "@/data/utilisateur"; import { Utilisateur } from "@/data/utilisateur";
export default{ export default {
data(){ data() {
return{ return {
nomApp:NOM_APP, nomApp: NOM_APP,
utilisateur:{}, utilisateur: {},
estConnecte:false, estConnecte: false,
} }
}, },
methods:{ methods: {
changerDarkMode: function(){ changerDarkMode: function () {
document.body.dataset.bsTheme!="dark" ? document.body.dataset.bsTheme="dark" : document.body.dataset.bsTheme="light" document.body.dataset.bsTheme != "dark" ? document.body.dataset.bsTheme = "dark" : document.body.dataset.bsTheme = "light"
} }
}, },
mounted(){ mounted() {
Utilisateur.utilisateurConnecte().then(user=>{ Utilisateur.utilisateurConnecte().then(user => {
this.estConnecte=user!=null this.estConnecte = user != null
this.utilisateur=user this.utilisateur = user
}) })
} }
} }
@ -28,13 +28,15 @@ export default{
<!-- logo temporaire <!-- logo temporaire
<img alt="Vue logo" src="@/assets/logo.png" /> <img alt="Vue logo" src="@/assets/logo.png" />
--> -->
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid"> <div class="container-fluid">
<router-link class="navbar-brand" to="/">{{ nomApp }}</router-link> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- cote gauche -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!--li class="nav-item"> <!--li class="nav-item">
TODO : trouver un moyen de gerer la page courante TODO : trouver un moyen de gerer la page courante
@ -53,23 +55,39 @@ export default{
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><router-link class="dropdown-item" to="/pendu">Pendu</router-link></li> <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><router-link class="dropdown-item" to="/kahoot">Kahoot</router-link></li>
<li><hr class="dropdown-divider"></li> <li>
<hr class="dropdown-divider">
</li>
<li><router-link class="dropdown-item disabled" to="/qui_est_ce">Qui-est-ce</router-link></li> <li><router-link class="dropdown-item disabled" to="/qui_est_ce">Qui-est-ce</router-link></li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> <!-- cote droit -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<button id="boutondarkmode" class="btn" v-on:click="changerDarkMode">💡</button> <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"> <div v-if="!estConnecte">
<router-link class="nav-link" to="/login">Se connecter</router-link> <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> </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"> <div v-if="estConnecte">
<router-link class="nav-link" to="/profil">{{ utilisateur.pseudo }}</router-link> <router-link class="nav-link" to="/profil">{{ utilisateur.pseudo }}</router-link>
</div> </div>
</ul>
</div>
</div> </div>
</nav> </nav>
</template> </template>
<style scoped> <style scoped></style>
</style>
Write Preview
Loading…
Cancel
Save