fix: profile banner toggle & background

src/components/ProfileBanner.vue

@@ -9,10 +9,12 @@ defineProps<{
   bgColor?: string;
   title?: string;
   caption?: string;
+  toggleTitle?: string;
 
   hideFade?: boolean;
   active?: boolean;
   readonly?: boolean;
+  useToggle?: boolean;
 
   menu?: { icon: string; color: string; bgColor: string }[];
 }>();
@@ -20,6 +22,7 @@ defineProps<{
 defineEmits<{
   (e: 'view'): void;
   (e: 'edit'): void;
+  (e: 'update:toggleStatus', toggleStatus: string): void;
 }>();
 
 const coverUrl = defineModel<string>('coverUrl', {
@@ -27,13 +30,17 @@ const coverUrl = defineModel<string>('coverUrl', {
   default: '',
 });
 
+const toggleStatus = defineModel<string>('toggleStatus', {
+  required: false,
+  default: 'CREATED',
+});
+
 const showOverlay = ref(false);
 </script>
 <template>
   <q-img
     fit="cover"
     class="cover rounded bordered relative-position"
-    position="0 0"
     :src="coverUrl || fallbackCover || 'blank-cover.png'"
     @error="coverUrl = ''"
   >
@@ -68,7 +75,7 @@ const showOverlay = ref(false);
             class="cursor-pointer relative-position"
             style="z-index: 1"
             :style="{
-              'background-color': `${bgColor || 'var(--brand-1)'}`,
+              background: `${bgColor || 'var(--brand-1)'}`,
               color: `${color || 'white'}`,
             }"
             @mouseover="showOverlay = true"
@@ -115,7 +122,26 @@ const showOverlay = ref(false);
         </div>
 
         <!-- icon -->
-        <div class="row items-center q-pr-lg" style="z-index: 999">
+        <div class="row items-center q-pr-lg" style="z-index: 1">
+          <span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
+            {{ toggleTitle }}
+          </span>
+          <q-toggle
+            v-if="useToggle"
+            id="toggle-status"
+            dense
+            size="md"
+            padding="none"
+            :model-value="toggleStatus !== 'INACTIVE'"
+            @click="$emit('update:toggleStatus', toggleStatus)"
+          />
+          <q-separator
+            v-if="useToggle"
+            vertical
+            class="q-my-lg"
+            spaced="lg"
+            style="background: hsl(var(--text-mute))"
+          />
           <div class="q-gutter-x-sm">
             <q-btn
               v-for="(item, n) in menu"