From 2f3a641013e20524d4ae150699662f9ddc54fa26 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 26 Jul 2021 20:49:42 +0100
Subject: [PATCH] :sparkles: Adds an optional logo image to the header, Re:
 #104

---
 src/components/PageStrcture/Header.vue    |  7 ++++++-
 src/components/PageStrcture/PageTitle.vue | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/PageStrcture/Header.vue b/src/components/PageStrcture/Header.vue
index aa49d6c3..754f3313 100644
--- a/src/components/PageStrcture/Header.vue
+++ b/src/components/PageStrcture/Header.vue
@@ -1,6 +1,11 @@
 <template>
     <header>
-      <PageTitle v-if="titleVisible"  :title="pageInfo.title" :description="pageInfo.description" />
+      <PageTitle
+        v-if="titleVisible"
+        :title="pageInfo.title"
+        :description="pageInfo.description"
+        :logo="pageInfo.logo"
+      />
       <Nav v-if="navVisible" :links="pageInfo.navLinks" class="nav" />
     </header>
 </template>
diff --git a/src/components/PageStrcture/PageTitle.vue b/src/components/PageStrcture/PageTitle.vue
index e64a72a8..98d75212 100644
--- a/src/components/PageStrcture/PageTitle.vue
+++ b/src/components/PageStrcture/PageTitle.vue
@@ -1,7 +1,10 @@
 <template>
   <router-link to="/" class="page-titles">
+    <img v-if="logo" :src="logo" class="site-logo" />
+    <div class="text">
     <h1>{{ title }}</h1>
     <span class="subtitle">{{ description }}</span>
+    </div>
   </router-link>
 </template>
 
@@ -11,6 +14,7 @@ export default {
   props: {
     title: String,
     description: String,
+    logo: String,
   },
 };
 </script>
@@ -20,7 +24,9 @@ export default {
 
 .page-titles {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
   text-decoration: none;
   h1 {
     color: var(--heading-text-color);
@@ -33,7 +39,13 @@ export default {
     text-shadow: 1px 1px 2px #130f23;
     opacity: var(--dimming-factor);
   }
+  img.site-logo {
+    margin: 0.2rem 0.5rem 0.2rem 0;
+    max-width: 3.5rem;
+    height: fit-content;
+  }
   @include phone {
+    flex-direction: column;
     text-align: center;
     padding: 0.25rem 0;
   }