Changed logo to responsive picture element

src/App.vue

@@ -10,22 +10,18 @@
       style="z-index: 5"
     >
       <v-app-bar-nav-icon @click="SET_LEFT_SIDEBAR_OPEN" />
-      <a
-        href="https://synclounge.tv"
-        target="_blank"
-      >
-        <img
-          class="ma-1 hidden-xs-only"
-          style="height: 42px; width: auto; vertical-align: middle"
-          :src="getLogos.light.long"
-        >
 
-        <img
-          class="ma-1 hidden-sm-and-up"
-          style="height: 42px; width: auto; vertical-align: middle"
-          :src="getLogos.light.small"
+      <picture>
+        <source
+          :srcset="getLogos.light.small"
+          :media="smallLogoMedia"
         >
-      </a>
+        <img
+          height="42"
+          :src="getLogos.light.long"
+          style="vertical-align: middle"
+        >
+      </picture>
 
       <nowplayingchip
         v-if="showNowPlaying"
@@ -243,6 +239,10 @@ export default {
         && this.$route.path.indexOf('nowplaying') === -1);
     },
 
+    smallLogoMedia() {
+      return `(max-width: ${this.$vuetify.breakpoint.thresholds.xs}px)`;
+    },
+
     mainStyle() {
       return this.GET_BACKGROUND
         ? { backgroundImage: `url(${this.GET_BACKGROUND})` }