Moved sidebar html to a separate component

src/components/Movie.vue

@@ -32,33 +32,20 @@
         <!-- SIDEBAR ACTIONS -->
         <div class="movie__actions" v-if="movie">
 
-          <a class="movie__actions-link" v-if="matched" :class="{'active' : matched}">
-            <svg class="movie__actions-icon"><use xlink:href="#iconExsits"></use></svg>
-            <span class="movie__actions-text"> Already in plex &nbsp;🎉</span>
-          </a>
-          <a class="movie__actions-link" v-else="matched">
-            <svg class="movie__actions-icon"><use xlink:href="#iconNot_exsits"></use></svg>
-            <span class="movie__actions-text"> Not in plex yet</span>
-          </a>
-
-          <a class="movie__actions-link" :class="{'active' : requested}" v-if="this.requested">
-            <svg class="movie__actions-icon"><use xlink:href="#iconSent"></use></svg>
-            <span class="movie__actions-text"> Requested to be downloaded</span>
-          </a>
-          <a class="movie__actions-link" v-else="this.requested"  @click.prevent="sendRequest">
-            <svg class="movie__actions-icon" :class="{'waiting' : requested}"><use xlink:href="#iconUnmatched"></use></svg>
-            <span class="movie__actions-text"> Request to be downloaded?</span>
-          </a>
-
-          <a class="movie__actions-link" @click="showTorrents=!showTorrents" v-if="admin==='true'" :class="{'active' : showTorrents}">
-            <svg class="movie__actions-icon"><use xlink:href="#icon_torrents"></use></svg>
-            <span class="movie__actions-text"> Search for torrents</span>
-          </a>
-
-          <a class="movie__actions-link" @click.prevent="openTmdb">
-            <svg class="movie__actions-icon"><use xlink:href="#icon_info"></use></svg>
-            <span class="movie__actions-text"> See more info</span>
-          </a>
+          <sidebar-action
+            :text="'Not yet in plex'" :iconRef="'#iconNot_exsits'"
+            :textActive="'Already in plex 🎉'" :iconRefActive="'#iconExists'"
+            :active="matched"></sidebar-action>
+          <sidebar-action
+            :text="'Request to be downloaded?'" :iconRef="'#iconSent'"
+            :textActive="'Requested to be downloaded'"
+            :active="requested"></sidebar-action>
+          <sidebar-action
+            v-if="admin" @click="showTorrents=!showTorrents"
+            :text="'Search for torrents'" :iconRef="'#icon_torrents'"
+            :active="showTorrents"></sidebar-action>
+          <sidebar-action
+            :iconRef="'#icon_info'" :text="'See more info'"></sidebar-action>
         </div>
 
         <!-- Loading placeholder -->
@@ -126,6 +113,7 @@ import storage from '@/storage.js'
 import img from '@/directives/v-image.js'
 import TorrentList from './TorrentList.vue'
 import Person from './Person.vue'
+import SidebarAction from './movie/SidebarAction.vue'
 
 import LoadingPlaceholder from './ui/LoadingPlaceholder.vue'
 
@@ -133,7 +121,7 @@ import { getMovie, getShow, request, getRequestStatus } from '@/api.js'
 
 export default {
   props: ['id', 'type'],
-  components: { TorrentList, Person, LoadingPlaceholder },
+  components: { TorrentList, Person, LoadingPlaceholder, SidebarAction },
   directives: { img: img }, // TODO decide to remove or use
   data(){
     return{

src/components/movie/SidebarAction.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="action">
+    <a class="action-link" :class="{'active': active}" @click="$emit('click')">
+      <svg class="action-icon">
+        <use v-if="active && iconRefActive" :xlink:href="iconRefActive"></use>
+        <use v-else :xlink:href="iconRef"></use>
+      </svg>
+      <span class="action-text">{{ active && textActive ? textActive : text }}</span> 
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    iconRef: {
+      type: String,
+      required: true
+    },
+    iconRefActive: {
+      type: String,
+      required: false
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    textActive: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/loading-placeholder";
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
+.action {
+  &-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    color: rgba($c-dark, 0.5);
+    transition: color 0.5s ease;
+    font-size: 11px;
+    padding: 5px 0;
+    border-bottom: 1px solid rgba($c-dark, 0.05);
+    &:hover {
+      color: rgba($c-dark, 0.75);
+    }
+    &.active {
+      color: $c-dark;
+    }
+    &.pending {
+      color: #f8bd2d;
+    }
+  }
+  &-icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 10px 0 0;
+    fill: rgba($c-dark, 0.5);
+    transition: fill 0.5s ease, transform 0.5s ease;
+    &.waiting {
+      transform: scale(0.8, 0.8);
+    }
+    &.pending {
+      fill: #f8bd2d;
+    }
+  }
+  &-link:hover &-icon {
+    fill: rgba($c-dark, 0.75);
+    cursor: pointer;
+  }
+  &-link.active &-icon {
+    fill: $c-green;
+  }
+  &-text {
+    display: block;
+    padding-top: 2px;
+    cursor: pointer;
+    margin:4.4px;
+    margin-left: -3px;
+  }
+}
+
+</style>