navbar: make user drop down open on click

This commit is contained in:
Simone Gotti 2019-05-13 23:27:53 +02:00
parent d8fddd5392
commit fbf3d7da88
1 changed files with 14 additions and 3 deletions

View File

@ -22,8 +22,12 @@
<div class="navbar-menu">
<div class="navbar-start"></div>
<div class="navbar-end">
<div v-if="user" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">{{user.username}}</a>
<div
v-if="user"
class="navbar-item has-dropdown"
v-bind:class="{ 'is-active': userDropdownActive }"
>
<a class="navbar-link" @click="toggleUserDropdown()">{{user.username}}</a>
<div class="navbar-dropdown">
<div class="navbar-item">
Logged as&nbsp;
@ -80,7 +84,8 @@ export default {
},
data() {
return {
routerActive: true
routerActive: true,
userDropdownActive: false
};
},
watch: {
@ -91,6 +96,9 @@ export default {
params: { username: this.user.username }
});
}
},
$route: function() {
this.userDropdownActive = false;
}
},
// method to reload current view from https://github.com/vuejs/vue-router/issues/296#issuecomment-356530037
@ -99,6 +107,9 @@ export default {
this.$store.dispatch("setError", null);
this.routerActive = false;
this.$nextTick(() => (this.routerActive = true));
},
toggleUserDropdown() {
this.userDropdownActive = !this.userDropdownActive;
}
}
};