Files
unity/resources/js/user/layouts/parts/HeaderUserArea.vue
T
glovetleong ad85832e75 user UI setup
user login UI
2021-07-06 11:54:00 +08:00

88 lines
4.4 KiB
Vue

<template>
<div v-if="user_detail.username" class="d-flex">
<div class="header-btn-lg pr-0">
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left">
<b-dropdown toggle-class="p-0 mr-2" menu-class="dropdown-menu-lg" variant="link" no-caret right>
<span slot="button-content">
<div class="icon-wrapper icon-wrapper-alt rounded-circle">
<img width="50" height="50" class="rounded-circle" :src="user_detail.img[0].file_info.small.file" alt="">
</div>
</span>
<div class="dropdown-menu-header">
<div class="dropdown-menu-header-inner bg-info">
<div class="menu-header-image opacity-2 dd-header-bg-6"></div>
<div class="menu-header-content text-left">
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<img width="42" class="rounded-circle" :src="user_detail.img[0].file_info.small.file" alt="">
</div>
<div class="widget-content-left">
<div class="widget-heading">{{ user_detail.username}}</div>
<div class="widget-subheading opacity-8">{{ user_detail.role_list[0].username }}</div>
</div>
<div class="widget-content-right mr-2">
<button
@click="logout"
class="btn-shadow btn-shine btn btn-focus"
>
Logout
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="scroll-area-xs" style="height: 80px;">
<vue-perfect-scrollbar class="scrollbar-container" v-once>
<ul class="nav flex-column">
<li class="nav-item-header nav-item">My Account</li>
<li class="nav-item">
<router-link
:to="'/admin/profile/update'"
class="nav-link"
title="Profile"
>
My Profile
</router-link>
</li>
</ul>
</vue-perfect-scrollbar>
</div>
</b-dropdown>
</div>
<div class="widget-content-left ml-3 header-user-info">
<div class="widget-heading">{{ user_detail.username }}</div>
<div class="widget-subheading">{{ user_detail.role_list[0].name }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import VueCircle from 'vue2-circle-progress'
export default {
components: {
VuePerfectScrollbar,
VueCircle,
},
props: {
user_detail: Object
},
methods: {
logout() {
General.logout();
}
}
}
</script>