Fix logo in navbar

1 files changed, 13 insertions, 2 deletions

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6497804..3410627 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -2,7 +2,7 @@
   <nav class="navbar">
     <div class="title">
       <img v-if="logo" class="logo" :src="logo" />
-      <router-link class="title-name" to="/">{{ title }}</router-link>
+      <router-link :class="titleClass" to="/">{{ title }}</router-link>
     </div>
     <div class="space"></div>
     <button @click="toggleMenu" class="menu-toggler">Menu</button>
@@ -33,6 +33,14 @@ export default {
     title: String,
     logo: String
   },
+  computed: {
+    titleClass() {
+      if (this.logo) {
+        return "title-name margin";
+      }
+      return "title-name";
+    }
+  },
   data: function() {
     return {
       menuCollapsed: true
@@ -79,12 +87,15 @@ export default {
 }
 
 .title-name {
-  margin-left: 120px;
   text-decoration: none;
   color: #181818;
   padding: 10px;
 }
 
+.title-name.margin {
+  margin-left: 120px;
+}
+
 .links {
   display: flex;
   flex-direction: row;