Added icon only logo

src/components/base/BaseLogo.vue

@@ -1,17 +1,15 @@
 <template>
   <div>
     <b-link to="/">
-      <b-img
-        :src="require('../../assets/logo.png')"
-        alt="Juggl"
-        :width="widthSize"
-        :center="center"
-      />
+      <b-img :src="image" alt="Juggl" :width="widthSize" :center="center" />
     </b-link>
   </div>
 </template>
 
 <script>
+import logo from "./../../assets/logo.png";
+import title from "./../../assets/title.png";
+
 export default {
   name: "BaseLogo",
   props: {
@@ -22,11 +20,15 @@ export default {
     center: {
       default: false,
       type: Boolean
+    },
+    iconOnly: {
+      default: false,
+      type: Boolean
     }
   },
   computed: {
     widthSize: function() {
-      let sizes = {
+      let titleSizes = {
         mini: "35px",
         tiny: "80px",
         smaller: "110px",
@@ -38,9 +40,34 @@ export default {
         huge: "800px",
         massive: "960px"
       };
+      let logoSizes = {
+        mini: "12px",
+        tiny: "30px",
+        smaller: "50px",
+        small: "65px",
+        normal: "80x",
+        medium: "100px",
+        large: "150px",
+        big: "200px",
+        huge: "300px",
+        massive: "400px"
+      };
+
+      var sizes = titleSizes;
+      if (this.iconOnly) {
+        sizes = logoSizes;
+      }
+
       let targetSize = sizes[this.size];
       if (targetSize === undefined) return sizes["small"];
       else return targetSize;
+    },
+    image: function() {
+      if (this.iconOnly) {
+        return logo;
+      } else {
+        return title;
+      }
     }
   }
 };

src/components/layout/LayoutMinimal.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <main>
-      <BaseLogo id="logo" size="medium" center class="space-top" />
+      <BaseLogo id="logo" size="medium" center class="space-top space-bottom-small" icon-only />
       <BaseContainer
         :width="width"
         center
@@ -65,4 +65,7 @@ export default {
 
 .center-content
   text-align: center
+
+.space-bottom-small
+  margin-bottom: 1rem
 </style>