Переглянути джерело

feat: enhance DefaultHeaderPage to display user avatar and name with user type label

alvesantos 1 день тому
батько
коміт
5c13530e1e
1 змінених файлів з 28 додано та 0 видалено
  1. 28 0
      src/components/layout/DefaultHeaderPage.vue

+ 28 - 0
src/components/layout/DefaultHeaderPage.vue

@@ -59,6 +59,34 @@
         <slot name="after" />
 
         <div class="flex items-center no-wrap" style="gap: 12px">
+          <div
+            class="flex items-center no-wrap q-gutter-x-md"
+            style="flex-shrink: 0"
+          >
+            <q-img
+              v-if="user?.avatar_url"
+              :src="user.avatar_url"
+              class="avatar-circle"
+            />
+
+            <div
+              v-if="$q.screen.gt.xs"
+              class="column q-gutter-y-none"
+              style="white-space: nowrap"
+            >
+              <span class="text-body2 text-center">{{ user?.name }}</span>
+              <span class="text-caption text-grey-6 text-center">{{
+                userTypeLabel
+              }}</span>
+            </div>
+          </div>
+
+          <q-separator
+            vertical
+            style="height: 36px; width: 2px; flex-shrink: 0"
+            color="dark"
+          />
+
           <!-- Seletor de unidade: aparece apenas quando o usuário tem mais de uma -->
           <template v-if="userUnits.length > 1">
             <DefaultSelect