1 files changed, 34 insertions, 1 deletions

diff --git a/src/components/Service.vue b/src/components/Service.vue
index a2448ca..80bf019 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <div class="card">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
+      <a class="card-arrow" v-bind:class="subcardClass" v-on:click="subCardActive = !subCardActive" v-if="item.links && item.links.length > 0">
+        <i style="font-size: 20px" class="fa fa-arrow-circle-down" v-bind:class="arrowClass"></i>
+      </a>
+      <a style="background-color: gray" :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
             <div v-if="item.logo" class="media-left">
@@ -24,16 +27,46 @@
           </div>
         </div>
       </a>
+      <ul class="subcard" v-bind:class="subcardClass">
+        <Subcard
+          v-for="link in item.links"
+          v-bind:link="link"
+          :key="link.url"
+        />
+      </ul>
     </div>
   </div>
 </template>
 
 <script>
+import Subcard from "./Subcard.vue";
+
 export default {
   name: "Service",
+  components: {
+    Subcard,
+  },
   props: {
     item: Object,
   },
+  data: function() {
+    return {
+      subCardActive: false,
+    }
+  },
+  computed: {
+    arrowClass: function() {
+      return {
+        "fa-arrow-circle-down": !this.subCardActive,
+        "fa-arrow-circle-up": this.subCardActive
+      }
+    },
+    subcardClass: function() {
+      return {
+        active: this.subCardActive
+      }
+    }
+  }
 };
 </script>