From a72fe117037c6d236847d5413387f2cd1895cfc8 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 26 Oct 2025 18:27:21 +0900
Subject: [PATCH] improve nav menu

---
 src/app.scss               |  10 +--
 src/components/NavMenu.vue | 129 +++++++++++++++++++++++++------------
 2 files changed, 91 insertions(+), 48 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 08b0e125..9120c9f6 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -318,11 +318,6 @@ hr.x-vertical-divider {
     background: #f8f8f8;
 }
 
-.x-menu-container > .el-menu {
-    background: 0;
-    border: 0;
-}
-
 .el-menu-item i {
     color: #000;
 }
@@ -359,9 +354,8 @@ hr.x-vertical-divider {
 }
 
 .pending-update {
-    margin: 7px;
-    height: 50px;
-    width: 50px;
+    height: 56px;
+    width: 64px;
     cursor: pointer;
 }
 
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 984170cc..35e776d1 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -1,43 +1,58 @@
 <template>
-    <div class="x-menu-container">
-        <div v-if="updateInProgress" class="pending-update" @click="showVRCXUpdateDialog">
-            <el-progress
-                type="circle"
-                :width="50"
-                :stroke-width="3"
-                :percentage="updateProgress"
-                :format="updateProgressText"></el-progress>
+    <div class="x-menu-container nav-menu-container">
+        <div>
+            <div v-if="updateInProgress" class="pending-update" @click="showVRCXUpdateDialog">
+                <el-progress
+                    type="circle"
+                    :width="50"
+                    :stroke-width="3"
+                    :percentage="updateProgress"
+                    :format="updateProgressText"></el-progress>
+            </div>
+            <div v-else-if="pendingVRCXUpdate || pendingVRCXInstall" class="pending-update">
+                <el-button
+                    type="success"
+                    plain
+                    style="font-size: 19px; height: 36px; width: 44px; margin: 10px"
+                    @click="showVRCXUpdateDialog"
+                    ><i class="ri-download-line"></i
+                ></el-button>
+            </div>
+
+            <el-menu ref="navRef" collapse router default-active="feed" :collapse-transition="false">
+                <el-menu-item
+                    v-for="item in navItems"
+                    :key="item.index"
+                    :index="item.index"
+                    :class="{ notify: notifiedMenus.includes(item.index) }">
+                    <i :class="item.icon"></i>
+                    <template #title>
+                        <span>{{ t(item.tooltip) }}</span>
+                    </template>
+                </el-menu-item>
+            </el-menu>
         </div>
-        <div v-else-if="pendingVRCXUpdate || pendingVRCXInstall" class="pending-update">
-            <el-button
-                type="default"
-                size="small"
-                :icon="Download"
-                circle
-                style="font-size: 14px; height: 50px; width: 50px"
-                @click="showVRCXUpdateDialog" />
+
+        <div class="nav-menu-container-bottom">
+            <el-tooltip :content="t('prompt.direct_access_omni.header')" placement="right"
+                ><div class="direct-access" @click="directAccessPaste"><i class="ri-compass-3-line"></i></div
+            ></el-tooltip>
+            <el-tooltip :content="t('nav_tooltip.settings')" placement="right"
+                ><div class="direct-access" @click="route.push({ name: 'settings' })">
+                    <i class="ri-settings-3-line"></i></div
+            ></el-tooltip>
         </div>
-        <el-menu ref="navRef" collapse router default-active="feed" :collapse-transition="false">
-            <el-menu-item
-                v-for="item in navItems"
-                :key="item.index"
-                :index="item.index"
-                :class="{ notify: notifiedMenus.includes(item.index) }">
-                <i :class="item.icon"></i>
-                <template #title>
-                    <span>{{ t(item.tooltip) }}</span>
-                </template>
-            </el-menu-item>
-        </el-menu>
     </div>
 </template>
 
 <script setup>
-    import { Download } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
+    import { useRouter } from 'vue-router';
 
-    import { useUiStore, useVRCXUpdaterStore } from '../stores';
+    import { useSearchStore, useUiStore, useVRCXUpdaterStore } from '../stores';
+
+    const route = useRouter();
 
     const { t } = useI18n();
 
@@ -53,8 +68,7 @@
         { index: 'friendList', icon: 'ri-contacts-book-3-line', tooltip: 'nav_tooltip.friend_list' },
         { index: 'charts', icon: 'ri-bar-chart-line', tooltip: 'nav_tooltip.charts' },
         { index: 'tools', icon: 'ri-tools-line', tooltip: 'nav_tooltip.tools' },
-        { index: 'profile', icon: 'ri-user-line', tooltip: 'nav_tooltip.profile' },
-        { index: 'settings', icon: 'ri-settings-3-line', tooltip: 'nav_tooltip.settings' }
+        { index: 'profile', icon: 'ri-user-line', tooltip: 'nav_tooltip.profile' }
     ];
 
     const VRCXUpdaterStore = useVRCXUpdaterStore();
@@ -62,17 +76,52 @@
     const { showVRCXUpdateDialog, updateProgressText } = VRCXUpdaterStore;
     const uiStore = useUiStore();
     const { notifiedMenus } = storeToRefs(uiStore);
+    const { directAccessPaste } = useSearchStore();
 </script>
 
 <style scoped>
-    .el-menu-item i[class*='ri-'] {
-        font-size: 19px;
-        width: 24px;
-        height: 24px;
-        display: inline-flex;
+    .nav-menu-container {
+        position: relative;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
         align-items: center;
-        justify-content: center;
-        text-align: center;
-        vertical-align: middle;
+        justify-content: space-between;
+        .el-menu {
+            background: 0;
+            border: 0;
+        }
+        .el-menu-item i[class*='ri-'] {
+            font-size: 19px;
+            width: 24px;
+            height: 24px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            vertical-align: middle;
+        }
+        .direct-access {
+            font-size: 19px;
+            width: 64px;
+            height: 56px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            vertical-align: middle;
+        }
+        .direct-access:hover {
+            background-color: var(--el-menu-hover-bg-color);
+            cursor: pointer;
+            transition:
+                border-color var(--el-transition-duration),
+                background-color var(--el-transition-duration),
+                color var(--el-transition-duration);
+        }
+        .nav-menu-container-bottom {
+            display: flex;
+            flex-direction: column;
+        }
     }
 </style>