feat: add help and support section to nav menu

src/components/NavMenu.vue

@@ -42,6 +42,51 @@
                     <i class="ri-feedback-line"></i></div
             ></el-tooltip>
 
+            <el-popover
+                v-model:visible="supportMenuVisible"
+                placement="right"
+                trigger="click"
+                popper-style="padding:4px;border-radius:8px;"
+                :offset="4"
+                :show-arrow="false"
+                :width="200"
+                :hide-after="0">
+                <div class="nav-menu-support nav-menu-settings">
+                    <div class="nav-menu-support__section">
+                        <button type="button" class="nav-menu-settings__item" @click="showChangeLogDialog">
+                            <span>{{ t('nav_menu.whats_new') }}</span>
+                        </button>
+                    </div>
+                    <el-divider></el-divider>
+                    <div class="nav-menu-support__section">
+                        <span class="nav-menu-support__title">{{ t('nav_menu.resources') }}</span>
+                        <button type="button" class="nav-menu-settings__item" @click="handleSupportLink('wiki')">
+                            <span>{{ t('nav_menu.wiki') }}</span>
+                        </button>
+                    </div>
+                    <el-divider></el-divider>
+                    <div class="nav-menu-support__section">
+                        <span class="nav-menu-support__title">{{ t('nav_menu.get_help') }}</span>
+                        <button type="button" class="nav-menu-settings__item" @click="handleSupportLink('github')">
+                            <span>{{ t('nav_menu.github') }}</span>
+                        </button>
+                        <button type="button" class="nav-menu-settings__item" @click="handleSupportLink('discord')">
+                            <span>{{ t('nav_menu.discord') }}</span>
+                        </button>
+                    </div>
+                    <el-divider></el-divider>
+                </div>
+                <template #reference>
+                    <div>
+                        <el-tooltip :content="t('nav_tooltip.help_support')" placement="right">
+                            <div class="bottom-button">
+                                <i class="ri-question-line"></i>
+                            </div>
+                        </el-tooltip>
+                    </div>
+                </template>
+            </el-popover>
+
             <el-popover
                 v-model:visible="settingsMenuVisible"
                 placement="right"
@@ -49,15 +94,20 @@
                 popper-style="padding:4px;border-radius:8px;"
                 :offset="4"
                 :show-arrow="false"
-                :width="200">
+                :width="200"
+                :hide-after="0">
                 <div class="nav-menu-settings">
                     <div class="nav-menu-settings__header">
                         <img class="nav-menu-settings__logo" :src="vrcxLogo" alt="VRCX" @click="openGithub" />
                         <div class="nav-menu-settings__meta">
-                            <span class="nav-menu-settings__title" @click="openGithub">VRCX💚</span>
+                            <span class="nav-menu-settings__title" @click="openGithub"
+                                >VRCX
+                                <i class="ri-heart-3-fill" style="color: #64cd8a; font-size: 14px"></i>
+                            </span>
                             <span class="nav-menu-settings__version">{{ version }}</span>
                         </div>
                     </div>
+                    <el-divider></el-divider>
                     <button type="button" class="nav-menu-settings__item" @click="handleSettingsClick">
                         <span>{{ t('nav_tooltip.settings') }}</span>
                     </button>
@@ -83,7 +133,7 @@
                         </div>
                         <template #reference>
                             <button type="button" class="nav-menu-settings__item" @click.prevent>
-                                <span>Theme</span>
+                                <span>{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
                                 <span class="nav-menu-settings__arrow">›</span>
                             </button>
                         </template>
@@ -129,7 +179,7 @@
 
     const navItems = [
         { index: 'feed', icon: 'ri-rss-line', tooltip: 'nav_tooltip.feed' },
-        { index: 'friend-location', icon: 'ri-map-pin-user-line', tooltip: 'nav_tooltip.friend_location' },
+        { index: 'friend-location', icon: 'ri-user-location-line', tooltip: 'nav_tooltip.friend_location' },
         { index: 'game-log', icon: 'ri-history-line', tooltip: 'nav_tooltip.game_log' },
         { index: 'player-list', icon: 'ri-group-3-line', tooltip: 'nav_tooltip.player_list' },
         { index: 'search', icon: 'ri-search-line', tooltip: 'nav_tooltip.search' },
@@ -145,7 +195,7 @@
     const VRCXUpdaterStore = useVRCXUpdaterStore();
     const { pendingVRCXUpdate, pendingVRCXInstall, updateInProgress, updateProgress, branch, appVersion } =
         storeToRefs(VRCXUpdaterStore);
-    const { showVRCXUpdateDialog, updateProgressText } = VRCXUpdaterStore;
+    const { showVRCXUpdateDialog, updateProgressText, showChangeLogDialog } = VRCXUpdaterStore;
     const uiStore = useUiStore();
     const { notifiedMenus } = storeToRefs(uiStore);
     const { directAccessPaste } = useSearchStore();
@@ -157,6 +207,7 @@
 
     const settingsMenuVisible = ref(false);
     const themeMenuVisible = ref(false);
+    const supportMenuVisible = ref(false);
 
     const version = computed(() => appVersion.value?.split('VRCX ')?.[1] || '-');
     const vrcxLogo = new URL('../../images/VRCX.png', import.meta.url).href;
@@ -167,6 +218,7 @@
 
     const handleSettingsClick = () => {
         themeMenuVisible.value = false;
+        supportMenuVisible.value = false;
         settingsMenuVisible.value = false;
         router.push({ name: 'settings' });
     };
@@ -187,11 +239,33 @@
     };
 
     watch(settingsMenuVisible, (visible) => {
-        if (!visible) {
+        if (visible) {
+            supportMenuVisible.value = false;
+        } else {
             themeMenuVisible.value = false;
         }
     });
 
+    watch(supportMenuVisible, (visible) => {
+        if (visible) {
+            settingsMenuVisible.value = false;
+        }
+    });
+
+    const supportLinks = {
+        wiki: 'https://github.com/vrcx-team/VRCX/wiki',
+        github: 'https://github.com/vrcx-team/VRCX',
+        discord: 'https://vrcx.app/discord'
+    };
+
+    const handleSupportLink = (id) => {
+        supportMenuVisible.value = false;
+        const target = supportLinks[id];
+        if (target) {
+            openExternalLink(target);
+        }
+    };
+
     onMounted(() => {
         if (!sentryErrorReporting.value) return;
         const feedback = Sentry.getFeedback();
@@ -200,6 +274,9 @@
 </script>
 
 <style scoped>
+    :deep(.el-divider) {
+        margin: 0;
+    }
     .nav-menu-container {
         position: relative;
         height: 100%;
@@ -254,8 +331,6 @@
             align-items: center;
             gap: 10px;
             padding: 8px 8px 10px;
-            border-bottom: 1px solid var(--el-border-color-light);
-            margin-bottom: 4px;
             .nav-menu-settings__logo {
                 width: 24px;
                 height: 24px;
@@ -272,7 +347,10 @@
                 line-height: 1.2;
             }
             .nav-menu-settings__title {
+                display: flex;
+                align-items: center;
                 font-weight: 600;
+                font-size: 14px;
                 color: var(--el-text-color-regular);
                 cursor: pointer;
             }
@@ -307,6 +385,48 @@
         .nav-menu-settings__item--danger {
             color: var(--el-color-danger);
         }
+
+        .nav-menu-settings__item--danger:hover {
+            background-color: rgba(245, 108, 108, 0.18);
+        }
+    }
+
+    .nav-menu-support {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .nav-menu-support__search {
+            padding: 10px 12px;
+            border-radius: 8px;
+            background: var(--el-fill-color-light);
+            color: var(--el-text-color-secondary);
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 1.2;
+        }
+
+        .nav-menu-support__heading {
+            padding: 4px 12px 0;
+            font-size: 13px;
+            font-weight: 700;
+            color: var(--el-text-color-primary);
+        }
+
+        .nav-menu-support__section {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .nav-menu-support__title {
+            padding: 0 12px;
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--el-text-color-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.4px;
+        }
     }
 
     .nav-menu-theme {

src/localization/en/en.json

@@ -14,8 +14,18 @@
         "friend_list": "Friend List",
         "charts": "Charts",
         "tools": "Tools",
+        "about": "About",
         "profile": "Profile",
-        "settings": "Settings"
+        "settings": "Settings",
+        "help_support": "Help & Support"
+    },
+    "nav_menu": {
+        "resources": "RESOURCES",
+        "wiki": "Wiki",
+        "get_help": "GET HELP",
+        "github": "VRCX on GitHub",
+        "discord": "Join our Discord",
+        "whats_new": "What's New?"
     },
     "view": {
         "login": {