From a9351617a24b9117788fb6378b849bcd3380a769 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 18 Oct 2019 11:02:50 +0900
Subject: [PATCH] Add bottom navigator for mobile devices

---
 .../components/organisms/BottomNavigator.vue  | 38 +++++++++++++++++++
 .../pages/projects/_id/annotation/index.vue   |  3 ++
 2 files changed, 41 insertions(+)
 create mode 100644 frontend/components/organisms/BottomNavigator.vue

diff --git a/frontend/components/organisms/BottomNavigator.vue b/frontend/components/organisms/BottomNavigator.vue
new file mode 100644
index 00000000..096f4c46
--- /dev/null
+++ b/frontend/components/organisms/BottomNavigator.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-bottom-navigation
+    absolute
+    hide-on-scroll
+    background-color="transparent"
+    class="elevation-0"
+  >
+    <v-tooltip top>
+      <template v-slot:activator="{ on }">
+        <v-btn v-on="on">
+          <span>Prev</span>
+          <v-icon>mdi-chevron-left</v-icon>
+        </v-btn>
+      </template>
+      <span>ctrl + ←</span>
+    </v-tooltip>
+
+    <v-btn value="done">
+      <span>Done</span>
+      <v-icon>mdi-check</v-icon>
+    </v-btn>
+
+    <v-btn value="guide">
+      <span>Guideline</span>
+      <v-icon>mdi-format-color-text</v-icon>
+    </v-btn>
+
+    <v-tooltip top>
+      <template v-slot:activator="{ on }">
+        <v-btn v-on="on">
+          <span>Next</span>
+          <v-icon>mdi-chevron-right</v-icon>
+        </v-btn>
+      </template>
+      <span>ctrl + →</span>
+    </v-tooltip>
+  </v-bottom-navigation>
+</template>
diff --git a/frontend/pages/projects/_id/annotation/index.vue b/frontend/pages/projects/_id/annotation/index.vue
index 65cba794..8327dfa1 100644
--- a/frontend/pages/projects/_id/annotation/index.vue
+++ b/frontend/pages/projects/_id/annotation/index.vue
@@ -13,6 +13,7 @@
           <paginator />
         </v-col>
       </v-row>
+      <bottom-navigator class="d-flex d-sm-none" />
       <v-row justify="center">
         <v-col cols="12" md="9">
           <v-card>
@@ -34,11 +35,13 @@ import EntityItemBox from '~/components/containers/EntityItemBox'
 import Paginator from '~/components/containers/Paginator'
 import GuidelineButton from '@/components/containers/GuidelineButton'
 import MetadataBox from '@/components/organisms/MetadataBox'
+import BottomNavigator from '@/components/organisms/BottomNavigator'
 
 export default {
   layout: 'annotation',
 
   components: {
+    BottomNavigator,
     EntityItemBox,
     Paginator,
     GuidelineButton,