improve nav menu

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: 56px;
-    height: 50px;
+    width: 64px;
-    width: 50px;
     cursor: pointer;
 }
 

src/components/NavMenu.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="x-menu-container">
+    <div class="x-menu-container nav-menu-container">
+        <div>
             <div v-if="updateInProgress" class="pending-update" @click="showVRCXUpdateDialog">
                 <el-progress
                     type="circle"
@@ -10,13 +11,14 @@
             </div>
             <div v-else-if="pendingVRCXUpdate || pendingVRCXInstall" class="pending-update">
                 <el-button
-                type="default"
+                    type="success"
-                size="small"
+                    plain
-                :icon="Download"
+                    style="font-size: 19px; height: 36px; width: 44px; margin: 10px"
-                circle
+                    @click="showVRCXUpdateDialog"
-                style="font-size: 14px; height: 50px; width: 50px"
+                    ><i class="ri-download-line"></i
-                @click="showVRCXUpdateDialog" />
+                ></el-button>
             </div>
+
             <el-menu ref="navRef" collapse router default-active="feed" :collapse-transition="false">
                 <el-menu-item
                     v-for="item in navItems"
@@ -30,14 +32,27 @@
                 </el-menu-item>
             </el-menu>
         </div>
+
+        <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>
+    </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: 'profile', icon: 'ri-user-line', tooltip: 'nav_tooltip.profile' }
-        { index: 'settings', icon: 'ri-settings-3-line', tooltip: 'nav_tooltip.settings' }
     ];
 
     const VRCXUpdaterStore = useVRCXUpdaterStore();
@@ -62,9 +76,21 @@
     const { showVRCXUpdateDialog, updateProgressText } = VRCXUpdaterStore;
     const uiStore = useUiStore();
     const { notifiedMenus } = storeToRefs(uiStore);
+    const { directAccessPaste } = useSearchStore();
 </script>
 
 <style scoped>
+    .nav-menu-container {
+        position: relative;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        .el-menu {
+            background: 0;
+            border: 0;
+        }
         .el-menu-item i[class*='ri-'] {
             font-size: 19px;
             width: 24px;
@@ -75,4 +101,27 @@
             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>