32 lines
1.1 KiB
Vue
32 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
|
|
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
|
|
import { useNotificationsStore } from "@/stores/notifications";
|
|
import { useNavigationAttributes } from "@/utils/navigation";
|
|
|
|
const notificationsStore = useNotificationsStore();
|
|
const { hasNotificationsMenu } = useNavigationAttributes();
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="hasNotificationsMenu" class="nav-item leading-none">
|
|
<NotificationPopover>
|
|
<template #toggleButtonContent>
|
|
<div class="relative h-8 w-8">
|
|
<div>
|
|
<it-icon-notification class="h-8 w-8" />
|
|
<div
|
|
v-if="notificationsStore.hasUnread"
|
|
aria-label="unread notifications"
|
|
class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #popoverContent>
|
|
<NotificationPopoverContent />
|
|
</template>
|
|
</NotificationPopover>
|
|
</div>
|
|
</template>
|