47 lines
No EOL
1.2 KiB
Vue
47 lines
No EOL
1.2 KiB
Vue
<template>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" @click="toggleDropdown">
|
|
<i class="align-middle" data-feather="settings"></i>
|
|
<b-icon-person class="bi-valign-middle"></b-icon-person>
|
|
</a>
|
|
|
|
<a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" @click="toggleDropdown">
|
|
<span class="text-dark">
|
|
{{ username }}
|
|
</span>
|
|
</a>
|
|
|
|
<div class="dropdown-menu dropdown-menu-right" id="userDropdown">
|
|
<a class="dropdown-item" href="#" @click="logout"> Log out</a>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
import * as BIcons from 'bootstrap-icons-vue';
|
|
import {mapMutations, mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "UserDropdown",
|
|
components: {
|
|
...BIcons
|
|
},
|
|
methods: {
|
|
...mapMutations(['logout']),
|
|
toggleDropdown() {
|
|
closeAllDropdowns();
|
|
document.getElementById("userDropdown").classList.toggle("show");
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
username() {
|
|
return this.user;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |