Initial commit

app/components/user/Profile.vue

@@ -0,0 +1,70 @@
+<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 v-for="(v, i) in tabs" style="list-style: none;">
+                <a
+                  :class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
+                  @click="changeTab(v)"
+                  :key="i"
+                >
+                  {{ isVietnamese ? v.vi : v.en }}
+                </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();
+const lang = computed(() => store.lang);
+const isVietnamese = computed(() => lang.value === "vi");
+var login = store.login;
+var tabs = [
+  { code: "info", vi: "Hồ sơ cá nhân", en: "Personal Information" },
+  { code: "password", vi: "Đổi mật khẩu", en: "Change Password" },
+  { code: "logout", vi: "Đăng xuất", en: "Logout" },
+];
+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>