diff options
| -rw-r--r-- | components/UserAvatar.vue | 20 | ||||
| -rw-r--r-- | components/VHeader.vue | 10 |
2 files changed, 26 insertions, 4 deletions
diff --git a/components/UserAvatar.vue b/components/UserAvatar.vue new file mode 100644 index 0000000..4d45ee0 --- /dev/null +++ b/components/UserAvatar.vue @@ -0,0 +1,20 @@ +<template lang="pug"> + div(v-if="data") + img.h-8.w-8.rounded-full(v-if="data.avatar" :src="baseAPI+''+data.avatar" alt="Avatar") + span.h-8.w-8.rounded-full.bg-white.pt-1(v-else) {{ data.username[0] }} +</template> + +<script> +export default { + name: "UserAvatar", + props: ["data"], + data() { + return { + baseAPI: "", + }; + }, + created() { + this.baseAPI = this.$config.api; + }, +}; +</script> diff --git a/components/VHeader.vue b/components/VHeader.vue index cf06af2..85d4f56 100644 --- a/components/VHeader.vue +++ b/components/VHeader.vue @@ -28,8 +28,7 @@ @click="boxUserInfo = !boxUserInfo" ) span.sr-only Open user menu - img.h-8.w-8.rounded-full(v-if="me && me.avatar" :src="baseAPI+''+me.avatar" alt="Avatar") - span.h-8.w-8.rounded-full.bg-white.pt-1(v-else-if="me") {{ me.username[0] }} + user-avatar(:data="me") .absolute.right-0.z-10.mt-2.w-48.origin-top-right.rounded-md.bg-white.py-1.shadow-lg.ring-1.ring-black.ring-opacity-5(class="focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" v-if="boxUserInfo && me") a#user-menu-item-0.block.px-4.py-2.text-sm.text-gray-700(:href="'/user/'+me.id" role="menuitem" tabindex="-1") Your Profile a#user-menu-item-1.block.px-4.py-2.text-sm.text-gray-700(href="#" role="menuitem" tabindex="-1") Settings @@ -48,17 +47,21 @@ </template> <script> +import UserAvatar from "@/components/UserAvatar.vue"; + import { mapGetters, mapActions } from "vuex"; export default { name: "VHeader", props: ["pageName"], + components: { + "user-avatar": UserAvatar, + }, data() { return { boxInfo: false, boxUserInfo: false, routeName: "", - baseAPI: "", }; }, computed: { @@ -66,7 +69,6 @@ export default { }, created() { this.routeName = this.$route.name; - this.baseAPI = this.$config.api; if (this.isLogged) { this.$store.dispatch("auth/findMe"); } |