Updated Map View

resources/js/Components/FlightsGoneBy/NotificationMenu.vue

@@ -3,11 +3,17 @@ import {ref, watch} from 'vue'
 import axios from "axios";
 import {Notification} from "@/Types/types";
 import {Link} from "@inertiajs/vue3";
+import {local} from "laravel-vite-plugin/fonts";
 
 const props = defineProps<{
     unreadCount: number
 }>()
 
+const localUnreadCount = ref(props.unreadCount)
+watch(() => props.unreadCount, (val) => {
+    localUnreadCount.value = val
+})
+
 
 const open = ref(false)
 const notifications = ref<Notification[]>([])
@@ -26,20 +32,25 @@ const emit = defineEmits<{
 }>()
 
 watch(open, async (isOpen) => {
-    if (!isOpen || notifications.value.length) return
+    if (!isOpen) return
+
+    localUnreadCount.value = 0
+    emit('update:unreadCount', 0)
+
+    if (notifications.value.length) return
+
     loading.value = true
     const { data } = await axios.get('/notifications')
     notifications.value = data
     loading.value = false
     await markAllRead(notifications.value)
-    emit('update:unreadCount', 0)  // <-- add this
 })
 </script>
 
 <template>
     <div class="notif-wrapper">
         <v-btn icon variant="text" @click="open = !open" aria-label="Notifications">
-            <v-badge :content="unreadCount" :model-value="unreadCount > 0" color="primary">
+            <v-badge :content="localUnreadCount" :model-value="localUnreadCount > 0" color="primary">
                 <v-icon>mdi-bell-outline</v-icon>
             </v-badge>
         </v-btn>