change folder location

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <searchbar/>
+  <router-view/>
+  <bottomNavigation/>
+</template>
+
+<script setup>
+  import {RouterView} from 'vue-router';
+  import searchbar from '@/components/searchbar.vue';
+  import bottomNavigation from '@/components/BottomNavigation.vue';
+</script>

src/components/BottomNavigation.vue

@@ -0,0 +1,38 @@
+<template>
+     <v-layout class="overflow-visible" style="height: 56px">
+    <v-bottom-navigation
+            class = "overflow"
+            v-model="value"
+                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>

src/components/map.vue

@@ -0,0 +1,27 @@
+<template>
+    <ol-map
+      :loadTilesWhileAnimating="true"
+      :loadTilesWhileInteracting="true"
+      style="height: 400px"
+    >
+      <ol-view
+        ref="view"
+        :center="center"
+        :rotation="rotation"
+        :zoom="zoom"
+        :projection="projection"
+      />
+  
+      <ol-tile-layer>
+        <ol-source-osm />
+      </ol-tile-layer>
+    </ol-map>
+  </template>
+  
+  <script setup>
+  import { ref } from "vue";
+    const center = ref([40, 40]);
+    const projection = ref("EPSG:4326");
+    const zoom = ref(8);
+    const rotation = ref(0);
+  </script>

src/components/searchbar.vue

@@ -0,0 +1,27 @@
+<template>
+    <v-layout style="height: 55px;">
+        <v-app-bar scroll-threshold="0"
+            class="mx-auto px-auto"
+            >
+
+            <v-text-field
+            density="compact"
+            variant="solo"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+            ></v-text-field>
+            <v-btn icon>
+                <v-icon>mdi-crosshairs-gps</v-icon>
+            </v-btn>
+        </v-app-bar>
+    </v-layout>
+</template>
+
+<script>
+import {RouterLink} from 'vue-router';
+  export default {
+    data: () => ({ value: 1 }),
+  }
+
+</script>

src/main.js

@@ -0,0 +1,21 @@
+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'
+
+// vue3-openlayers
+import OpenLayersMap from "vue3-openlayers";
+
+import App from '@/App.vue'
+import router from '@/plugins/router'
+
+const vuetify = createVuetify({
+    components,
+    directives,
+  })
+
+createApp(App).use(router).use(vuetify).use(OpenLayersMap).mount('#app')

src/plugins/router.js

@@ -0,0 +1,14 @@
+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({
+    routes,
+    history: createWebHistory(),
+})
+
+export default router

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,
+    },
+  },
+})

src/style.css

@@ -0,0 +1,16 @@
+/* for mobile user */
+body{
+  margin: auto auto auto auto;
+  max-width: auto;
+  max-height: auto;
+  background-color: white;
+}
+:root{
+  background-color: rgb(131, 131, 131);
+}
+/* disable desktop & tablet for now due to unfinalized design */
+@media only screen and (min-width: 700px) {
+  body{
+    display: none;
+  }
+}

src/views/About.vue

@@ -0,0 +1,10 @@
+<template>
+
+    <h1>About!</h1>
+    <p>Esse velit cupidatat proident minim nostrud fugiat proident est sunt ex cillum nisi duis labore.</p>
+
+</template>
+
+<script setup>
+
+</script>

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>

src/views/Home.vue

@@ -0,0 +1,32 @@
+<template>
+    <!-- TO DO need someone to make map fuctional properly -->
+    <!--don't know why height auto didn't work so i write 1117px for temporary -->
+    <ol-map
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 1117px;"
+    
+  >
+    <ol-view
+      ref="view"
+      :center="center"
+      :rotation="rotation"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-tile-layer>
+      <ol-source-osm />
+    </ol-tile-layer>
+  </ol-map>
+</template>
+
+
+<script setup>
+import { ref } from "vue";
+
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+const rotation = ref(0);
+</script>

src/views/Setting.vue

@@ -0,0 +1,11 @@
+<template>
+    
+    <h1>Setting</h1>
+    <ul>
+        <li>Accout Setting</li>
+    </ul>
+</template>
+
+<script setup>
+
+</script>