mirror of
https://github.com/zammad/zammad
synced 2026-05-24 09:48:36 +00:00
68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<!-- Copyright (C) 2012-2026 Zammad Foundation, https://zammad-foundation.org/ -->
|
|
<script setup lang="ts">
|
|
import { computed, toRef } from 'vue'
|
|
|
|
import CommonUserAvatar from '#shared/components/CommonUserAvatar/CommonUserAvatar.vue'
|
|
import { useOnlineNotificationCount } from '#shared/entities/online-notification/composables/useOnlineNotificationCount.ts'
|
|
import { useSessionStore } from '#shared/stores/session.ts'
|
|
|
|
import { useCustomLayout } from './useCustomLayout.ts'
|
|
|
|
const user = toRef(useSessionStore(), 'user')
|
|
const { isCustomLayout } = useCustomLayout()
|
|
const { unseenCount } = useOnlineNotificationCount()
|
|
|
|
const notificationCount = computed(() => {
|
|
if (!unseenCount.value) return ''
|
|
if (unseenCount.value > 99) return '99+'
|
|
return unseenCount.value.toString()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<footer
|
|
class="bottom-navigation fixed bottom-0 z-10 w-full bg-gray-light backdrop-blur-lg"
|
|
:class="{ 'px-4': isCustomLayout }"
|
|
data-bottom-navigation
|
|
>
|
|
<div v-if="!isCustomLayout" class="flex h-14 w-full items-center text-center">
|
|
<CommonLink link="/" class="flex flex-1 justify-center" exact-active-class="text-blue">
|
|
<CommonIcon name="home" />
|
|
</CommonLink>
|
|
<CommonLink
|
|
link="/notifications"
|
|
exact-active-class="text-blue"
|
|
class="relative flex flex-1 justify-center"
|
|
>
|
|
<div
|
|
v-if="notificationCount"
|
|
role="status"
|
|
:aria-label="$t('Unread notifications')"
|
|
class="absolute h-4 min-w-[1rem] rounded-full bg-blue px-1 text-center text-xs text-black ltr:ml-4 rtl:mr-4"
|
|
>
|
|
{{ notificationCount }}
|
|
</div>
|
|
<CommonIcon name="notification-subscribed" decorative />
|
|
</CommonLink>
|
|
<CommonLink
|
|
link="/account"
|
|
class="group flex flex-1 justify-center"
|
|
exact-active-class="user-active"
|
|
>
|
|
<CommonUserAvatar
|
|
v-if="user"
|
|
:entity="user"
|
|
class="group-[.user-active]:rounded-full group-[.user-active]:ring-2 group-[.user-active]:ring-blue"
|
|
size="small"
|
|
personal
|
|
/>
|
|
</CommonLink>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bottom-navigation {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
</style>
|