feat: add hamburgerItem

src/components/top-bar/Hamburger.vue

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import Mode from '../setting-panel/components/Mode.vue'
 import SwitchLanguage from '../setting-panel/components/SwitchLanguage.vue'
-import { topBarItem } from './topBarItem'
+import { hamburgerItem } from './hamburgerItem'
 
 defineEmits(['showKUNGalgameHamburger'])
 </script>
@@ -20,18 +20,22 @@ defineEmits(['showKUNGalgameHamburger'])
         </div>
         <!-- Interactive items -->
         <div class="item" style="font-size: 17px">
-          <span v-for="kun in topBarItem" :key="kun.index">
+          <span v-for="kun in hamburgerItem" :key="kun.index">
             <RouterLink :to="kun.router">
-              {{ $tm(`header['${kun.name}']`) }}
+              {{ $tm(`header.hamburger.${kun.name}`) }}
             </RouterLink>
           </span>
         </div>
 
         <!-- Day and night mode switch component -->
-        <Mode style="font-size: 20px" />
+        <Mode style="font-size: 15px" />
 
         <!-- Language switch component -->
-        <SwitchLanguage style="font-size: 20px" />
+        <SwitchLanguage style="font-size: 15px" />
+
+        <div class="home">
+          <RouterLink to="/kun">{{ $tm('header.hamburger.home') }}</RouterLink>
+        </div>
       </div>
     </Transition>
   </div>
@@ -54,8 +58,9 @@ defineEmits(['showKUNGalgameHamburger'])
 }
 
 .container {
+  height: 100vh;
   position: absolute;
-  width: 277px;
+  width: 247px;
   padding: 10px;
   background-color: var(--kungalgame-trans-white-2);
   border: 1px solid var(--kungalgame-blue-1);
@@ -88,4 +93,21 @@ defineEmits(['showKUNGalgameHamburger'])
     font-size: 20px;
   }
 }
+
+.home {
+  width: 100%;
+  padding: 10px;
+
+  a {
+    padding: 5px 10px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    font-size: 20px;
+    border: 1px solid var(--kungalgame-blue-4);
+    color: var(--kungalgame-blue-4);
+  }
+}
 </style>

src/components/top-bar/KUNGalgameTopBar.vue

@@ -71,7 +71,7 @@ onBeforeRouteLeave(() => {
         <!-- Top individual sections -->
         <span v-for="kun in topBarItem" :key="kun.index">
           <RouterLink :to="{ path: kun.router }">
-            {{ $tm(`header['${kun.name}']`) }}
+            {{ $tm(`header.${kun.name}`) }}
           </RouterLink>
         </span>
         <!-- Hover effect under the top section -->

src/components/top-bar/hamburgerItem.ts

@@ -0,0 +1,22 @@
+// Interface for individual items in the top navigation bar
+interface Hamburger {
+  index: number
+  name: string
+  router: string
+}
+
+// Items in the top navigation bar
+// (be sure to include '/' here, or child routes may have issues!!!)
+export const hamburgerItem: Hamburger[] = [
+  { index: 1, name: 'pool', router: '/pool' },
+  { index: 2, name: 'create', router: '/edit' },
+  { index: 3, name: 'technique', router: '/technique' },
+  { index: 4, name: 'about', router: '/kungalgame' },
+  { index: 5, name: 'ranking', router: '/ranking' },
+  { index: 6, name: 'update', router: '/update-log' },
+  { index: 7, name: 'bylaw', router: '/bylaw' },
+  { index: 8, name: 'balance', router: '/balance' },
+  { index: 9, name: 'nonMoe', router: '/non-moe' },
+  { index: 10, name: 'thanks', router: '/thanks-list' },
+  { index: 11, name: 'join', router: '/contact' },
+]

src/language/en.ts

@@ -6,6 +6,21 @@ export default {
     technique: 'TECHNIQUE',
     about: 'ABOUT',
     return: 'HOME',
+    hamburger: {
+      name: 'KUN Visual Novel',
+      pool: 'Pool',
+      create: 'Create Topic',
+      technique: 'Technique',
+      about: 'About Us',
+      ranking: 'Ranking',
+      update: 'Update Log',
+      bylaw: 'Regulations',
+      balance: 'P & L',
+      nonMoe: 'Non-moe',
+      thanks: 'Thanks List',
+      join: 'Join / Contacts',
+      home: 'Back Home',
+    },
     settings: {
       name: 'Settings',
       mode: 'Mode',

src/language/zh.ts

@@ -6,6 +6,21 @@ export default {
     technique: '技术交流',
     about: '关于我们',
     return: '返回主页',
+    hamburger: {
+      name: '鲲 Galgame',
+      pool: '所有话题',
+      create: '发布话题',
+      technique: '技术交流',
+      about: '关于我们',
+      ranking: '排行榜单',
+      update: '更新日志',
+      bylaw: '执行条例',
+      balance: '收支公示',
+      nonMoe: '不萌记录',
+      thanks: '感谢名单',
+      join: '加入 / 联系',
+      home: '返回主页',
+    },
     settings: {
       name: '设置面板',
       mode: '模式切换',