add bottom navigation bar

micromobility-navigation/index.html

@@ -4,8 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
     <title>micromobility-navigation</title>
     <style>
+    
     html, body {margin: 0; height: 100%; overflow: hidden}
     </style>
   

micromobility-navigation/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "vue": "^3.3.4",
-        "vue-router": "^4.2.4"
+        "vue-router": "^4.2.4",
+        "vuetify": "^3.3.8"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
@@ -729,6 +730,39 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vuetify": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.8.tgz",
+      "integrity": "sha512-m88MUczIeyNXfINnklBhat2fRknOUmeWyxgGTOZI5b95j9JTZwPH0b1z979nS6gJIyhPDVTuZSS/abp5aUyGBA==",
+      "engines": {
+        "node": "^12.20 || >=14.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": "^1.0.0-alpha.12",
+        "vue": "^3.2.0",
+        "vue-i18n": "^9.0.0",
+        "webpack-plugin-vuetify": "^2.0.0-alpha.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
     }
   }
 }

micromobility-navigation/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vuetify": "^3.3.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

micromobility-navigation/src/App.vue

@@ -1,15 +1,12 @@
 <template>
-  
-  <router-view/>
 
-  <ul>
+  <bottomNavigation/>
-    <li><router-link :to="{name: 'home'}">Home</router-link></li>
+
-    <!-- <li><router-link :to="{name: 'about'}">About</router-link></li> -->
+  <router-view/>
-    <li><router-link :to="{name: 'setting'}">Setting</router-link></li>
-  </ul>
 
 </template>
 
 <script setup>
-  import {RouterLink, RouterView} from 'vue-router';
+  import {RouterView} from 'vue-router';
+  import bottomNavigation from '@/components/bottom-navigation.vue';
 </script>

micromobility-navigation/src/components/bottom-navigation.vue

@@ -0,0 +1,41 @@
+<template>
+
+    <v-layout class="overflow-visible" style="height: 56px;">
+      <v-bottom-navigation
+        v-model="value"
+        color="teal"
+        grow
+      >
+        <router-link :to="{name: 'home'}">
+            <v-btn :to="{name: 'home'}">
+                <v-icon>mdi-map</v-icon>
+                แผนที่
+            </v-btn>
+        </router-link>
+
+        <router-link :to="{name: 'favorite'}">
+            <v-btn :to="{name: 'favorite'}">
+                <v-icon>mdi-heart</v-icon>
+                สถานที่โปรด
+            </v-btn>
+        </router-link>
+
+        <router-link :to="{name: 'setting'}">
+            <v-btn :to="{name: 'setting'}">
+                <v-icon>mdi-cog</v-icon>
+                การตั้งค่า
+            </v-btn>
+        </router-link>
+
+      </v-bottom-navigation>
+    </v-layout>
+
+  </template>
+
+  <script>
+  import {RouterLink} from 'vue-router';
+  
+    export default {
+      data: () => ({ value: 1 }),
+    }
+  </script>

micromobility-navigation/src/main.js

@@ -1,7 +1,18 @@
 import { createApp } from 'vue'
 import '@/style.css'
 
+// Vuetify
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
 import App from '@/App.vue'
 import router from '@/plugins/router'
 
-createApp(App).use(router).mount('#app')
+const vuetify = createVuetify({
+    components,
+    directives,
+  })
+
+createApp(App).use(router).use(vuetify).mount('#app')

micromobility-navigation/src/plugins/router.js

@@ -3,6 +3,7 @@ import {createRouter, createWebHistory} from 'vue-router'
 const routes = [
     {path: '', name: 'home', component: () => import('@/views/Home.vue')},
     {path: '/about', name: 'about', component: () => import('@/views/About.vue')},
+    {path: '/favorite', name: 'favorite', component: () => import('@/views/Favorite.vue')},
     {path: '/setting', name: 'setting', component: () => import('@/views/Setting.vue')},
 ]
 const router = createRouter({

micromobility-navigation/src/plugins/vuetify.js

@@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import { createVuetify, ThemeDefinition } from 'vuetify'
+
+const myCustomLightTheme = {
+  dark: false,
+  colors: {
+    background: '#FFFFFF',
+    surface: '#FFFFFF',
+    primary: '#6200EE',
+    'primary-darken-1': '#3700B3',
+    secondary: '#03DAC6',
+    'secondary-darken-1': '#018786',
+    error: '#B00020',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00',
+  },
+}
+
+export default createVuetify({
+  theme: {
+    defaultTheme: 'myCustomLightTheme',
+    themes: {
+      myCustomLightTheme,
+    },
+  },
+})

micromobility-navigation/src/style.css

@@ -2,9 +2,8 @@
 body{
   display: block;
   margin: auto auto auto auto;
-  padding: 1rem 1rem 1rem 1rem;
   max-width: 450px;
-  height: 925px;
+  max-height: auto;
   background-color: white;
 }
 :root{

micromobility-navigation/src/views/Favorite.vue

@@ -0,0 +1,9 @@
+<template>
+    <h1>Favorie</h1>
+    <ul>
+        <li>List of Destination</li>
+        <li>List of Destination</li>
+        <li>List of Destination</li>
+        <li>List of Destination</li>
+    </ul>
+</template>

micromobility-navigation/src/views/Home.vue

@@ -1,15 +1,5 @@
 <template>
-
+    <img src="https://cdn.discordapp.com/attachments/933187220217663570/1129696534863286353/image.png.png" alt="placeholder for map">
-    <h1>Home</h1>
-
-    <div>
-        Search System Here
-    </div>
-
-    <div>
-        Map
-    </div>
-    
 </template>
 
 <script setup>