navbar: make user drop down open on click
This commit is contained in:
parent
d8fddd5392
commit
fbf3d7da88
17
src/App.vue
17
src/App.vue
|
@ -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
|
Logged as
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue