fix

src/components/HeaderBlock.vue

@@ -11,7 +11,10 @@
       </div>
       <div class="header-block__title">
         <slot>
-          <div v-if="!hasSlotContent && pageTitle">{{ pageTitle }}</div>
+          <div v-if="pageTitle || pageSubtitle" class="header-block__heading">
+            <span v-if="pageSubtitle" class="header-block__heading-eyebrow">{{ pageTitle }}</span>
+            <span>{{ pageSubtitle || pageTitle }}</span>
+          </div>
         </slot>
       </div>
       <div class="header-block__icons">
@@ -27,7 +30,10 @@
     </div>
     <div class="header-block__title-mobile">
       <slot>
-        <div v-if="!hasSlotContent && pageTitle">{{ pageTitle }}</div>
+        <div v-if="pageTitle || pageSubtitle" class="header-block__heading">
+          <span v-if="pageSubtitle" class="header-block__heading-eyebrow">{{ pageTitle }}</span>
+          <span>{{ pageSubtitle || pageTitle }}</span>
+        </div>
       </slot>
     </div>
 
@@ -43,22 +49,20 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUIStore } from '@/store/ui'
 import { gallery } from '@/utils/gallery'
 import useAuth from '@/composables/useAuth'
-import { computed, ref, useSlots } from 'vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import { useLogoutMutation } from '@/services/query/auth'
 
 defineProps({
   pageTitle: { type: String, default: '' },
+  pageSubtitle: { type: String, default: '' },
 })
 
-const slots = useSlots()
-const hasSlotContent = computed(() => !!slots.default)
-
 const ui = useUIStore()
 const router = useRouter()
 const { clearSession } = useAuth()
@@ -176,6 +180,18 @@ const iconList = [
     }
   }
 
+  &__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__heading-eyebrow {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: #a7a7a7;
+  }
+
   &__icons {
     flex-basis: 33.33%;