a
/
agola-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.vue
View File

@ -22,8 +22,12 @@
<div class="navbar-menu"> <div class="navbar-menu">
<div class="navbar-start"></div> <div class="navbar-start"></div>
<div class="navbar-end"> <div class="navbar-end">
<div v-if="user" class="navbar-item has-dropdown is-hoverable"> <div
<a class="navbar-link">{{user.username}}</a> 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-dropdown">
<div class="navbar-item"> <div class="navbar-item">
Logged as&nbsp; Logged as&nbsp;
@ -80,7 +84,8 @@ export default {
}, },
data() { data() {
return { return {
routerActive: true routerActive: true,
userDropdownActive: false
}; };
}, },
watch: { watch: {
@ -91,6 +96,9 @@ export default {
params: { username: this.user.username } 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 // 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.$store.dispatch("setError", null);
this.routerActive = false; this.routerActive = false;
this.$nextTick(() => (this.routerActive = true)); this.$nextTick(() => (this.routerActive = true));
},
toggleUserDropdown() {
this.userDropdownActive = !this.userDropdownActive;
} }
} }
}; };