Added Notifications

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -3,6 +3,7 @@ import { Link, useForm } from "@inertiajs/vue3";
 import { usePage } from '@inertiajs/vue3'
 import type { SharedProps } from '@/Types/types'
 import { ref, onMounted, onUnmounted } from 'vue'
+import NotificationMenu from "@/Components/FlightsGoneBy/NotificationMenu.vue";
 
 const props = usePage<SharedProps>().props
 const menuOpen = ref(false)
@@ -26,14 +27,7 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
     <header class="glass">
         <Link href="/" class="brand">FlightsGoneBy</Link>
 
-        <button v-if="props.auth.user" class="notif-btn" aria-label="Notifications">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-            </svg>
-            <span class="notif-dot" />
-        </button>
+        <NotificationMenu v-if="props.auth.user" :unread-count="props.unread_notification_count" />
 
         <!-- Desktop nav -->
         <nav class="nav-desktop">