81 lines
No EOL
2.8 KiB
Vue
81 lines
No EOL
2.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">
|
|
<authenticated-image :src="profilePictureSrc" :owner="username" :alt="username" :title="username"
|
|
img-class="avatar img-fluid rounded mr-1" :width="36" :height="36" fit="cover"/>
|
|
|
|
</a>
|
|
|
|
<div class="dropdown-menu dropdown-menu-right" id="userDropdown">
|
|
<div class="dropdown-header">
|
|
<span class="text-dark">
|
|
{{ username }}
|
|
</span>
|
|
</div>
|
|
<div class="dropdown-divider"></div>
|
|
<router-link to="/friends" class="dropdown-item">
|
|
<b-icon-people class="bi-valign-middle mr-1"></b-icon-people>
|
|
<span class="align-middle">Friends</span>
|
|
</router-link>
|
|
<router-link to="/groups" class="dropdown-item">
|
|
<b-icon-people-fill class="bi-valign-middle mr-1"></b-icon-people-fill>
|
|
<span class="align-middle">Groups</span>
|
|
</router-link>
|
|
<!--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 {mapActions, mapMutations, mapState} from "vuex";
|
|
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
|
|
|
export default {
|
|
name: "UserDropdown",
|
|
components: {
|
|
AuthenticatedImage,
|
|
...BIcons
|
|
},
|
|
methods: {
|
|
...mapActions(['fetchUserProfile']),
|
|
...mapMutations(['logout']),
|
|
toggleDropdown() {
|
|
closeAllDropdowns();
|
|
document.getElementById("userDropdown").classList.toggle("show");
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user', 'user_profile']),
|
|
username() {
|
|
return this.user;
|
|
},
|
|
profilePictureSrc() {
|
|
return this.user_profile?.profile_picture?.name || null;
|
|
}
|
|
},
|
|
mounted() {
|
|
if (!this.user_profile) {
|
|
this.fetchUserProfile();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style> |