fix: profile banner tabs & active status

src/components/ProfileBanner.vue

@@ -17,6 +17,7 @@ defineProps<{
   useToggle?: boolean;
 
   menu?: { icon: string; color: string; bgColor: string }[];
+  tabsList?: { name: string; label: string }[];
 }>();
 
 defineEmits<{
@@ -35,12 +36,17 @@ const toggleStatus = defineModel<string>('toggleStatus', {
   default: 'CREATED',
 });
 
+const currentTab = defineModel<string>('currentTab');
+
 const showOverlay = ref(false);
+
+currentTab.value = 'name1';
 </script>
 <template>
   <q-img
     fit="cover"
     class="cover rounded bordered relative-position"
+    :style="`height: ${tabsList ? '12rem' : '10rem'}`"
     :src="coverUrl || fallbackCover || 'blank-cover.png'"
     @error="coverUrl = ''"
   >
@@ -55,20 +61,17 @@ const showOverlay = ref(false);
         )`"
     >
       <!-- profile -->
-      <div class="flex items-center full-height q-pl-lg" style="z-index: 999">
+      <div class="flex items-center full-height q-pl-lg" style="z-index: 1">
         <div
           class="surface-1"
-          style="
+          style="border-radius: 50%; border: 4px solid var(--surface-1)"
-            border-radius: 50%;
-            border: 4px solid var(--surface-1);
-            overflow: hidden;
-          "
         >
-          <div
+          <!-- <div
             class="avatar__status"
             style="z-index: 2"
             :style="`${active ? 'background-color: hsla(var(--positive-bg) / 1)' : 'background-color: hsla(var(--text-mute) / 1)'}`"
-          ></div>
+          ></div> -->
+
           <q-avatar
             size="6rem"
             font-size="3rem"
@@ -96,25 +99,50 @@ const showOverlay = ref(false);
               </template>
             </q-img>
             <q-icon v-else :name="icon || 'mdi-account'" />
+            <q-badge
+              class="absolute-bottom-right"
+              style="
+                border-radius: 10px;
+                width: 20px;
+                height: 20px;
+                z-index: 2;
+                background: var(--surface-1);
+              "
+            >
+              <q-badge
+                class="absolute-center"
+                style="border-radius: 7px; width: 14px; height: 14px"
+                :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
+              ></q-badge>
+            </q-badge>
 
-            <!-- <Transition name="slide-fade"> -->
+            <Transition name="slide-fade">
               <div
                 v-if="showOverlay && !readonly"
-              class="absolute-bottom text-caption flex items-center justify-center upload-overlay"
+                class="absolute text-caption full-width full-height"
+                style="border-radius: 50% 50%; overflow: hidden"
                 :class="{ dark: $q.dark.isActive }"
+              >
+                <div
+                  class="upload-overlay absolute-bottom flex items-center justify-center"
                   @click.stop="$emit('edit')"
                 >
                   {{ $t('editImage') }}
                 </div>
-            <!-- </Transition> -->
+              </div>
+            </Transition>
           </q-avatar>
         </div>
       </div>
 
       <!-- text -->
       <div
-        class="absolute-bottom relative-position justify-between row text-cover"
+        class="absolute-bottom relative-position column text-cover justify-between no-wrap"
         :class="{ dark: $q.dark.isActive }"
+      >
+        <div
+          class="row justify-between full-height"
+          style="padding-left: 150px"
         >
           <div class="column">
             <span class="text-bold q-pt-xs text-body1">{{ title }}</span>
@@ -155,13 +183,37 @@ const showOverlay = ref(false);
             </div>
           </div>
         </div>
+
+        <div class="row" v-if="tabsList && currentTab">
+          <div class="row q-px-sm full-width">
+            <q-tabs
+              inline-label
+              mobile-arrows
+              dense
+              class="app-text-muted full-width"
+              v-model="currentTab"
+              active-class="active-tab"
+              indicator-color="transparent"
+              align="left"
+            >
+              <q-tab
+                :id="`tab-${tab.label}`"
+                v-for="tab in tabsList"
+                v-bind:key="tab.name"
+                class="content-tab text-capitalize"
+                :name="tab.name"
+                :label="$t(tab.label)"
+              />
+            </q-tabs>
+          </div>
+        </div>
+      </div>
     </nav>
   </q-img>
 </template>
 
 <style lang="scss">
 .cover {
-  height: 15vh;
   overflow: hidden;
   background-size: cover;
   background-repeat: no-repeat;
@@ -169,8 +221,7 @@ const showOverlay = ref(false);
 }
 
 .text-cover {
-  height: 7.5vh;
+  height: 50%;
-  padding-left: 150px;
   background: linear-gradient(
     90deg,
     rgba(255, 255, 255, 1) 35%,
@@ -201,7 +252,7 @@ const showOverlay = ref(false);
 }
 
 .upload-overlay {
-  top: 3.5rem;
+  top: 60%;
   background-color: hsla(var(--gray-10-hsl) / 0.5);
   color: white;