3 files changed, 66 insertions, 1 deletions

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d3ceaf8..fd57156 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -3,6 +3,12 @@
     <nav class="navbar" role="navigation" aria-label="main navigation">
       <div class="container">
         <div class="navbar-brand">
+          <SearchInput
+            class="search-bar search-bar-mobile is-hidden-desktop"
+            @input="filterServices"
+            @search:open="navigateToFirstService"
+            @search:cancel="filterServices"
+          />
           <a
             role="button"
             aria-label="menu"
@@ -36,6 +42,13 @@
           </div>
           <div class="navbar-end">
             <slot></slot>
+
+            <SearchInput
+              class="navbar-item is-inline-block-mobile is-hidden-touch"
+              @input="filterServices"
+              @search:open="navigateToFirstService"
+              @search:cancel="filterServices"
+            />
           </div>
         </div>
       </div>
@@ -44,14 +57,21 @@
 </template>
 
 <script>
+import SearchInput from "./SearchInput.vue";
+
 export default {
   name: "Navbar",
+  components: {
+    SearchInput,
+  },
   props: {
     open: {
       type: Boolean,
       default: false,
     },
     links: Array,
+    navigateToFirstService: { type: Function },
+    filterServices: { type: Function },
   },
   computed: {
     showMenu: function () {
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>
 
diff --git a/src/components/Subcard.vue b/src/components/Subcard.vue
new file mode 100644
index 0000000..808cd48
--- /dev/null
+++ b/src/components/Subcard.vue
@@ -0,0 +1,12 @@
+<template v-for="link in item.links">
+  <li><a :href="link.url">{{ link.name }}</a></li>
+</template>
+
+<script>
+export default {
+  name: "Subcard",
+  props: {
+    link: Object,
+  },
+};
+</script>