Logo Branding

resources/js/Components/FlightsGoneBy/Logo.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type LogoVariant = 'color' | 'mono'
+
+const props = withDefaults(defineProps<{
+    variant?: LogoVariant
+    height?: string
+    width?: string
+}>(), {
+    variant: 'color',
+    height: '90%',
+    width: 'auto',
+})
+
+const sources: Record<LogoVariant, string> = {
+    color: '/img/logos/header_logo_color.svg',
+    mono: '/img/logos/header_logo_mono.svg',
+}
+
+const src = computed(() => sources[props.variant])
+</script>
+
+<template>
+    <img
+        :src="src"
+        alt="FlightsGoneBy"
+        class="logo"
+        :style="{ height: props.height }"
+    />
+</template>
+
+<style scoped>
+.logo {
+    width: auto;
+    display: block;
+}
+</style>

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;