From 8266a07c00383d20a154424534050b28f3451f52 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Sun, 20 Oct 2019 22:24:28 +0900
Subject: [PATCH] Update try demo button

---
 .../components/organisms/TheBottomBanner.vue  | 44 +++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/frontend/components/organisms/TheBottomBanner.vue b/frontend/components/organisms/TheBottomBanner.vue
index 3e285a6c..87ed13e0 100644
--- a/frontend/components/organisms/TheBottomBanner.vue
+++ b/frontend/components/organisms/TheBottomBanner.vue
@@ -31,14 +31,28 @@
               Realize your ideas quickly
             </h1>
             <div class="mt-4">
-              <v-btn
-                class="blue lighten-2"
-                dark
-                large
-                href="/demo"
-              >
-                Try demo
-              </v-btn>
+              <v-menu open-on-hover offset-y>
+                <template v-slot:activator="{ on }">
+                  <v-btn
+                    class="blue lighten-2"
+                    dark
+                    large
+                    v-on="on"
+                  >
+                    Try demo
+                    <v-icon>mdi-menu-down</v-icon>
+                  </v-btn>
+                </template>
+                <v-list>
+                  <v-list-item
+                    v-for="(item, index) in items"
+                    :key="index"
+                    @click="$router.push('/demo/' + item.link)"
+                  >
+                    <v-list-item-title>{{ item.title }}</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
             </div>
           </v-flex>
         </v-layout>
@@ -46,3 +60,17 @@
     </v-parallax>
   </section>
 </template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        { title: 'Named Entity Recognition', link: 'named-entity-recognition' },
+        { title: 'Sentiment Analysis', link: 'sentiment-analysis' },
+        { title: 'Translation', link: 'translation' }
+      ]
+    }
+  }
+}
+</script>