59 lines
No EOL
1.8 KiB
Vue
59 lines
No EOL
1.8 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">
|
|
<img src="/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
|
|
alt="Charles Hall"/>
|
|
<span class="text-dark">
|
|
{{ username }}
|
|
</span>
|
|
</a>
|
|
|
|
<div class="dropdown-menu dropdown-menu-right" id="userDropdown">
|
|
<router-link to="/profile" class="dropdown-item">
|
|
<b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
|
|
Profile
|
|
</router-link>
|
|
<router-link to="/settings" class="dropdown-item">
|
|
<b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
|
|
Settings &
|
|
Privacy
|
|
</router-link>
|
|
<div class="dropdown-divider"></div>
|
|
<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> |