Navbar Notifications

File: src/@core/components/Notifications.vue

---

You can pass notifications received from your API response to this component for displaying them in the navbar. It also emits click:readAllNotifications event to mark all notifications as read. This component is used in src/layouts/components/NavBarNotifications.vue file.

Below is code snippet of component usage:

TS

<script lang="ts" setup> import type { Notification } from '@layouts/types'  const notifications = ref<Notification[]>([  {  id: 1,  img: avatar4,  title: 'Congratulation Flora! 🎉',  subtitle: 'Won the monthly best seller badge',  time: 'Today',  isSeen: true,  } ])  const removeNotification = (notificationId: number) => {  notifications.value.forEach((item, index) => {  if (notificationId === item.id)  notifications.value.splice(index, 1)  }) }  const markRead = (notificationId: number[]) => {  notifications.value.forEach(item => {  notificationId.forEach(id => {  if (id === item.id)  item.isSeen = true  })  }) }  const markUnRead = (notificationId: number[]) => {  notifications.value.forEach(item => {  notificationId.forEach(id => {  if (id === item.id)  item.isSeen = false  })  }) }  const handleNotificationClick = (notification: Notification) => {  if (!notification.isSeen)  markRead([notification.id]) } </script>  <template>  <Notifications  :notifications="notifications"  @remove="removeNotification"  @read="markRead"  @unread="markUnRead"  @click:notification="handleNotificationClick"  /> </template>

JS

<script setup> const notifications = ref([  {  id: 1,  img: avatar4,  title: 'Congratulation Flora! 🎉',  subtitle: 'Won the monthly best seller badge',  time: 'Today',  isSeen: true,  } ])  const removeNotification = (notificationId) => {  notifications.value.forEach((item, index) => {  if (notificationId === item.id)  notifications.value.splice(index, 1)  }) }  const markRead = (notificationId) => {  notifications.value.forEach(item => {  notificationId.forEach(id => {  if (id === item.id)  item.isSeen = true  })  }) }  const markUnRead = (notificationId) => {  notifications.value.forEach(item => {  notificationId.forEach(id => {  if (id === item.id)  item.isSeen = false  })  }) }  const handleNotificationClick = (notification) => {  if (!notification.isSeen)  markRead([notification.id]) } </script>  <template>  <Notifications  :notifications="notifications"  @remove="removeNotification"  @read="markRead"  @unread="markUnRead"  @click:notification="handleNotificationClick"  /> </template>