From 06b3d1cda6ba9f523e09bd7def2e788df7d55e8f Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Tue, 10 May 2022 15:55:15 -0400
Subject: [PATCH] [+] Add kitchen menu tab

---
 src/App.vue               |  8 ++++----
 src/scripts/messages.ts   |  3 ++-
 src/scripts/router.ts     | 26 ++++++++++++++++----------
 src/views/Others.vue      | 23 +++++++++++++++++++++++
 src/views/others/Menu.vue | 17 +++++++++++++++++
 5 files changed, 62 insertions(+), 15 deletions(-)
 create mode 100644 src/views/Others.vue
 create mode 100644 src/views/others/Menu.vue

diff --git a/src/App.vue b/src/App.vue
index a08ef10..3a7d663 100644
--- a/src/App.vue
+++ b/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);
diff --git a/src/scripts/messages.ts b/src/scripts/messages.ts
index 398f408..a43227d 100644
--- a/src/scripts/messages.ts
+++ b/src/scripts/messages.ts
@@ -4,10 +4,11 @@ export const messages = {
     en: {
         nav: {
             home: 'Home',
-            about: 'About',
+            about: '关于',
             blog: '记事本',
             life: '生活',
             projects: 'Projects',
+            others: '更多'
         }
     },
     zh: {
diff --git a/src/scripts/router.ts b/src/scripts/router.ts
index edc1249..7dcf577 100644
--- a/src/scripts/router.ts
+++ b/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',
diff --git a/src/views/Others.vue b/src/views/Others.vue
new file mode 100644
index 0000000..b6fc494
--- /dev/null
+++ b/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>
diff --git a/src/views/others/Menu.vue b/src/views/others/Menu.vue
new file mode 100644
index 0000000..32a2c8b
--- /dev/null
+++ b/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>