feat: user account info on top

src/layouts/MainLayout.vue

@@ -41,14 +41,16 @@ const leftDrawerOpen = ref(false);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
 const filterRole = ref<string[]>();
+const userImage = ref<string>();
 
 const currentLanguage = ref<string>('ไทย');
 const language: {
   value: string;
   label: string;
+  icon: string;
 }[] = [
-  { value: 'th-th', label: 'ไทย' },
-  { value: 'en-US', label: 'English' },
+  { value: 'th-th', label: 'ไทย', icon: 'circle-flags:th' },
+  { value: 'en-US', label: 'English', icon: 'circle-flags:us' },
 ];
 
 const notiOpen = ref(false);
@@ -84,8 +86,14 @@ const notification = ref<Notification[]>([
     read: true,
   },
 ]);
-
-const userImage = ref<string>();
+const options = ref([
+  {
+    icon: 'mdi-lock-outline',
+    label: 'เปลี่ยนรหัสผ่าน',
+    value: 'op1',
+    color: 'primary',
+  },
+]);
 
 function setActive(button: NotificationButton) {
   notiMenu.value = notiMenu.value.map((current) => ({
@@ -130,7 +138,6 @@ onMounted(async () => {
 
   const userRoles = getRole();
   if (userRoles) {
-    console.log(userRoles);
     filterRole.value = userRoles.filter(
       (role) =>
         role !== 'default-roles-dev' &&
@@ -263,7 +270,8 @@ onMounted(async () => {
             dense
             flat
             no-caps
-            :menu-offset="[0, 10]"
+            content-style="border: 1px solid var(--border-color)"
+            :menu-offset="[30, 10]"
             color="dark"
             class="q-pa-none account-menu-down dropdown-menu"
           >
@@ -296,32 +304,61 @@ onMounted(async () => {
               </q-item>
             </template>
 
-            <q-list class="dropdown-menu">
-              <q-item clickable>
-                <q-item-section avatar style="min-width: 30px">
-                  <q-icon
-                    color="secondary"
-                    size="18px"
-                    name="mdi-lock-outline"
-                  />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>เปลี่ยนรหัสผ่าน</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="doLogout()">
-                <q-item-section avatar style="min-width: 30px">
-                  <q-icon
-                    color="primary"
-                    size="18px"
-                    name="mdi-logout-variant"
-                  />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>ออกจากระบบ</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
+            <div no-padding class="row justify-center" style="width: 273.797px">
+              <div class="column col-12 items-center">
+                <div
+                  class="full-width row justify-center"
+                  style="position: relative"
+                >
+                  <div
+                    class="full-width account-cover"
+                    :class="{ dark: $q.dark.isActive }"
+                  ></div>
+                  <div class="avartar-border">
+                    <q-avatar size="72px" class="bg-primary">
+                      <img :src="userImage" v-if="userImage" />
+                    </q-avatar>
+                  </div>
+                </div>
+
+                <div
+                  class="text-subtitle2 q-mb-xs text-center"
+                  style="margin-top: 58px"
+                >
+                  {{ getName() }}
+                </div>
+                <div
+                  class="badge q-px-sm q-mb-md text-caption"
+                  :class="{ dark: $q.dark.isActive }"
+                >
+                  {{ getRoleName(userStore.userOption.roleOpts, filterRole) }}
+                </div>
+              </div>
+
+              <div class="column col-12">
+                <q-separator />
+                <div class="column justify-center">
+                  <q-list dense v-for="op in options" :key="op.label">
+                    <q-item clickable>
+                      <q-item-section avatar>
+                        <q-icon :name="op.icon" :color="op.color" size="20px" />
+                      </q-item-section>
+                      <q-item-section class="q-py-sm">
+                        {{ op.label }}
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+                <q-btn
+                  dense
+                  flat
+                  class="q-ma-sm logout-btn"
+                  :class="{ dark: $q.dark.isActive }"
+                  label="ออกจากระบบ"
+                  @click="doLogout()"
+                />
+              </div>
+            </div>
           </q-btn-dropdown>
 
           <!-- theme -->
@@ -411,4 +448,41 @@ onMounted(async () => {
     color: var(--foreground);
   }
 }
+
+.badge {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--indigo-0);
+  text-wrap: nowrap;
+
+  &.dark {
+    background-color: var(--surface-3);
+  }
+}
+
+.account-cover {
+  height: 65px;
+  background-color: var(--indigo-0);
+
+  &.dark {
+    background-color: var(--surface-3);
+  }
+}
+
+.avartar-border {
+  margin-top: 24px;
+  border: 5px solid var(--surface-1);
+  border-radius: 50%;
+  position: absolute;
+}
+
+.logout-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsl(var(--stone-3-hsl));
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
 </style>