[+] Add kitchen menu tab

src/App.vue

@@ -5,9 +5,9 @@
         <div id="menu" @click="showMenu"><i class="fas fa-bars"></i></div>
 
         <div id="items" class="fbox-v">
-            <router-link class="router-link" ref="blog" to="/blog">{{ $t('nav.blog') }}</router-link>
+            <router-link class="router-link" ref="others" to="/others">{{ $t('nav.others') }}</router-link>
             <div class="dot">·</div>
-            <router-link class="router-link" ref="projects" to="/projects">{{ $t('nav.projects') }}</router-link>
+            <router-link class="router-link" ref="blog" to="/blog">{{ $t('nav.blog') }}</router-link>
             <div class="dot">·</div>
             <router-link class="router-link" ref="life" to="/life">{{ $t('nav.life') }}</router-link>
             <div class="dot">·</div>
@@ -62,7 +62,7 @@ export default class App extends Vue
         })
 
         console.log('AfterEach called', to)
-        this.currentRoute = (to.name as string).toLowerCase()
+        this.currentRoute = ((to.meta?.navBookmark ?? to.name) as string).toLowerCase()
 
         this.calculateBookmarkCss()
         this.menuOpen = false
@@ -72,7 +72,7 @@ export default class App extends Vue
     {
         console.log('Mounted called', this.$route)
         router.afterEach(this.updateBookmark)
-        if (this.$route.name) this.currentRoute = (this.$route.name as string).toLowerCase()
+        if (this.$route.name) this.currentRoute = ((this.$route.meta?.navBookmark ?? this.$route.name) as string).toLowerCase()
 
         // Resize listener
         window.addEventListener('resize', this.calculateBookmarkCss, true);

src/scripts/messages.ts

@@ -4,10 +4,11 @@ export const messages = {
     en: {
         nav: {
             home: 'Home',
-            about: 'About',
+            about: '关于',
             blog: '记事本',
             life: '生活',
             projects: 'Projects',
+            others: '更多'
         }
     },
     zh: {

src/scripts/router.ts

@@ -5,7 +5,7 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/',
         name: 'Home',
-        meta: {title: 'Home'},
+        meta: {title: 'Home', nav: true},
         component: Home
     },
     {
@@ -17,7 +17,7 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/about',
         name: 'About',
-        meta: {title: 'About Me'},
+        meta: {title: '关于', nav: true},
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
@@ -26,22 +26,28 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/life',
         name: 'Life',
-        meta: {title: 'Life'},
+        meta: {title: '生活', nav: true},
         component: () => import('../views/Life.vue')
     },
-    {
-        path: '/projects',
-        name: 'Projects',
-        meta: {title: 'Projects'},
-        component: () => import('../views/Projects.vue')
-    },
     {
         path: '/blog',
         name: 'Blog',
-        meta: {title: '记事本'},
+        meta: {title: '记事本', nav: true},
         component: () => import('../views/Blog.vue'),
         props: route => (route.query)
     },
+    {
+        path: '/others',
+        name: 'Others',
+        meta: {title: '更多', nav: true},
+        component: () => import('../views/Others.vue')
+    },
+    {
+        path: '/kitchen-menu',
+        name: 'Menu',
+        meta: {title: '菜单', navBookmark: 'Others'},
+        component: () => import('../views/others/Menu.vue')
+    },
     {
         path: '/color',
         name: 'ColorPicker',

src/views/Others.vue

@@ -0,0 +1,23 @@
+<template>
+    <div id="Others">
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import Collapse from "@/components/Collapse.vue";
+
+@Options({components: {Collapse}})
+export default class Others extends Vue
+{
+
+
+}
+</script>
+
+<style lang="sass" scoped>
+#Others
+    text-align: left
+    width: 600px
+    margin: 20px auto
+</style>

src/views/others/Menu.vue

@@ -0,0 +1,17 @@
+<template>
+    <div id="Menu">
+
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+
+@Options({components: {}})
+export default class Menu extends Vue
+{
+}
+</script>
+
+<style lang="sass" scoped>
+</style>