Display: Move code to PlatformLogo component to show platform logo - refs BT#21621

assets/vue/components/layout/PlatformLogo.vue

@@ -0,0 +1,16 @@
+<script setup>
+import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg"
+import { usePlatformConfig } from "../../store/platformConfig"
+
+const platformConfigStore = usePlatformConfig()
+
+const siteName = platformConfigStore.getSetting("platform.site_name")
+</script>
+
+<template>
+  <img
+    :alt="siteName"
+    :src="headerLogoPath"
+    :title="siteName"
+  />
+</template>

assets/vue/components/layout/TopbarLoggedIn.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="app-topbar">
     <div class="app-topbar__start">
-      <img
+      <PlatformLogo />
-        :src="headerLogo"
-        alt="Chamilo LMS"
-      />
     </div>
     <div class="app-topbar__items">
       <PrimeButton
@@ -61,9 +58,9 @@ import { chamiloIconToClass } from "../basecomponents/ChamiloIcons"
 import { useCidReq } from "../../composables/cidReq"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
 
-import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg"
 import { useNotification } from "../../composables/notification"
 import { useI18n } from "vue-i18n"
+import PlatformLogo from "./PlatformLogo.vue"
 
 const { t } = useI18n()
 
@@ -122,8 +119,6 @@ function toogleUserMenu(event) {
   elUserSubmenu.value.toggle(event)
 }
 
-const headerLogo = headerLogoPath
-
 const btnInboxBadge = computed(() =>
   messageRelUserStore.countUnread > 9 ? "9+" : messageRelUserStore.countUnread.toString(),
 )

assets/vue/components/layout/TopbarNotLoggedIn.vue

@@ -2,10 +2,7 @@
   <div class="app-topbar">
     <Menubar :model="menuItems">
       <template #start>
-        <img
+        <PlatformLogo />
-          :src="headerLogo"
-          alt="Chamilo LMS"
-        />
       </template>
     </Menubar>
   </div>
@@ -14,10 +11,10 @@
 <script setup>
 import { computed } from "vue"
 import Menubar from "primevue/menubar"
-import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg"
 import { useI18n } from "vue-i18n"
 import { useRouter } from "vue-router"
 import { useLocale } from "../../composables/locale"
+import PlatformLogo from "./PlatformLogo.vue"
 
 const { t } = useI18n()
 const router = useRouter()
@@ -57,6 +54,4 @@ const menuItems = computed(() => [
     items: languageItems,
   },
 ])
-
-const headerLogo = headerLogoPath
 </script>

var/vue_templates/components/layout/TopbarNotLoggedIn.vue

@@ -1,9 +1,7 @@
 <script setup>
 import { computed } from "vue"
 import Menubar from "primevue/menubar"
-import headerLogoPath from "../../../../assets/css/themes/chamilo/images/header-logo.svg"
+import PlatformLogo from "../../../../assets/vue/components/layout/PlatformLogo.vue"
-
-const headerLogo = headerLogoPath
 
 const menuItems = computed(() => [])
 </script>
@@ -12,10 +10,7 @@ const menuItems = computed(() => [])
   <div class="app-topbar">
     <Menubar :model="menuItems">
       <template #start>
-        <img
+        <PlatformLogo />
-          :src="headerLogo"
-          alt="Chamilo LMS"
-        />
       </template>
       <template #end />
     </Menubar>