Logo Branding

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -4,6 +4,7 @@ import { usePage } from '@inertiajs/vue3'
 import type { SharedProps } from '@/Types/types'
 import { ref, onMounted, onUnmounted } from 'vue'
 import NotificationMenu from "@/Components/FlightsGoneBy/NotificationMenu.vue";
+import Logo from "@/Components/FlightsGoneBy/Logo.vue";
 
 const page = usePage<SharedProps>()
 const menuOpen = ref(false)
@@ -25,7 +26,9 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
 
 <template>
     <header class="glass">
-        <Link href="/" class="brand">FlightsGoneBy</Link>
+        <Link href="/" class="brand">
+            <Logo variant="color" />
+        </Link>
 
         <NotificationMenu v-if="page.props.auth?.user" :unread-count="page.props.unread_notification_count" />
 
@@ -99,14 +102,12 @@ header {
 }
 
 .brand {
+    display: flex;
+    align-items: center;
+    height: 100%;
     margin-right: auto;
-    font-size: 1.25rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--accent);
     text-decoration: none;
 }
-
 .nav-greeting {
     font-size: 0.85rem;
     font-weight: 500;