MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 22:03:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve nav menu

Browse Source
This commit is contained in:
pa
2025-10-26 18:27:21 +09:00
committed by Natsumi
parent 03509a441b
commit a72fe11703
2 changed files with 91 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app.scss
View File

@@ -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;
}

129
src/components/NavMenu.vue
View File

@@ -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>