Chamilo is a learning management system focused on ease of use and accessibility
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
chamilo-lms/assets/vue/components/layout/TopbarLoggedIn.vue

122 lines
2.6 KiB

<template>
<MegaMenu
:model="menuItems"
>
<template #start>
<img
alt="Chamilo LMS"
src="/build/css/themes/chamilo/images/header-logo.svg"
>
</template>
<template #item="{item}">
<router-link
v-if="item.to"
:to="item.to"
class="p-menuitem-link"
>
<span
:class="item.icon"
class="p-menuitem-icon mx-0"
/>
<span class="p-menuitem-text hidden">{{ item.label }}</span>
</router-link>
<a
v-if="item.url"
:href="item.url"
class="p-menuitem-link"
aria-haspopup="true"
aria-controls="user-submenu"
>
<span
:class="item.icon"
class="p-menuitem-icon mx-0"
/>
<span class="p-menuitem-text hidden">{{ item.label }}</span>
</a>
</template>
<template #end>
<Avatar
:image="currentUser.illustrationUrl"
class="cursor-pointer"
shape="circle"
@click="toogleUserMenu"
/>
</template>
</MegaMenu>
<Menu
id="user-submenu"
ref="elUserSubmenu"
:model="userSubmenuItems"
:popup="true"
/>
</template>
<script setup>
import {ref} from "vue";
import {useRoute} from "vue-router";
import MegaMenu from "primevue/megamenu";
import Avatar from "primevue/avatar";
import Menu from "primevue/menu";
const props = defineProps({
currentUser: {
required: true,
type: Object,
},
platformSettings: {
required: true,
type: Object,
}
});
const route = useRoute();
const menuItems = ref([
{
label: 'Tickets',
icon: 'pi pi-fw pi-ticket',
url: (function () {
const queryParams = new URLSearchParams(window.location.href);
const cid = route.query.cid || route.params.id || queryParams.get('cid') || 0;
const sid = route.query.sid || queryParams.get('sid') || 0;
const gid = route.query.gid || queryParams.get('gid') || 0;
return `/main/ticket/tickets.php?project_id=1&cid=${cid}&sid=${sid}&gid=${gid}`;
})(),
visible: 'true' !== props.platformSettings['display.show_link_ticket_notification'],
},
{
label: 'Profile',
icon: 'pi pi-fw pi-user',
to: '/account/home',
},
{
label: 'Inbox',
icon: 'pi pi-fw pi-inbox',
to: '/resources/messages'
},
]);
const elUserSubmenu = ref(null);
const userSubmenuItems = [
{
label: props.currentUser.fullName,
items: [
{
label: 'Settings',
url: '/account/edit'
},
]
},
];
function toogleUserMenu(event) {
elUserSubmenu.value.toggle(event);
}
</script>