juggl/src/components/base/BaseLogo.vue

<template>
  <div>
    <b-link to="/">
      <b-img
        :src="require('../../assets/logo.png')"
        alt="Juggl"
        :width="widthSize"
        :center="center"
      />
    </b-link>
  </div>
</template>

<script>
export default {
  name: "BaseLogo",
  props: {
    size: {
      default: "small",
      type: String
    },
    center: {
      default: false,
      type: Boolean
    }
  },
  computed: {
    widthSize: function() {
      let sizes = {
        mini: "35px",
        tiny: "80px",
        smaller: "110px",
        small: "150px",
        normal: "175px",
        medium: "300px",
        large: "450px",
        big: "600px",
        huge: "800px",
        massive: "960px"
      };
      let targetSize = sizes[this.size];
      if (targetSize === undefined) return sizes["small"];
      else return targetSize;
    }
  }
};
</script>

<style />