Add bottom navigator for mobile devices

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>

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,