changes

components/user/Profile.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="columns mx-0" v-if="login">
+    <div class="column is-3">
+      <div class="leftbox">
+        <Avatarbox class="ml-4"
+        v-bind="{image: undefined, text: login.fullname.substring(0,1).toUpperCase(), type: 'primary', size: 'three'}"/>
+        <div>
+        <p class="ml-4 mt-3 fsb-16"><span>{{login.fullname}}</span></p>
+        <p class="ml-4 mt-1 fs-14 has-text-grey"><span>{{login.username}}</span></p>
+        <p class="border-bottom mt-2"></p>
+        <aside class="menu" style="padding-top: 22px;">
+        <ul class="menu-list">
+          <li><a :class="`${v.code===tab? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`" @click="changeTab(v)"
+            v-for="(v,i) in tabs" :key="i">
+            {{v.vi}}
+          </a></li>
+        </ul>
+      </aside>
+      </div>
+      </div>
+    </div>
+    <div class="column">
+      <UserInfo v-if="tab==='info'"></UserInfo>
+      <ChangePass v-else-if="tab==='password'"></ChangePass>
+      <Logout v-else-if="tab==='logout'"></Logout>
+    </div>
+</div>
+</template>
+<script setup>
+import Logout from "@/components/user/Logout"
+import UserInfo from "@/components/user/UserInfo"
+import ChangePass from "@/components/user/ChangePass"
+import { useStore } from '~/stores/index'
+const store = useStore()
+var login = store.login
+var tabs = [{code: 'info', vi: store.lang==='en'? 'Personal information' : 'Hồ sơ cá nhân'}, 
+{code: 'password', vi: store.lang==='en'? 'Change password' : 'Đổi mật khẩu'}, 
+{code: 'logout', vi: store.lang==='en'? 'Sign out' : 'Đăng xuất'}]
+var tab = ref('info')
+function changeTab(v) {
+  tab.value = v.code
+}
+</script>
+<style>
+.leftbox {
+  border-radius: 15px;
+  background: rgb(245,245,246);
+  padding: 20px;
+}
+</style>