From 840273474fa0ac5ff032c3b7be6ea8e8bd01af14 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Mon, 22 Jul 2024 19:01:53 +0800
Subject: [PATCH] fix(projects): fix vertical-menu will not render when the
 layout is from mobile

---
 src/layouts/modules/global-menu/index.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/layouts/modules/global-menu/index.vue b/src/layouts/modules/global-menu/index.vue
index e828fe9c..45434d92 100644
--- a/src/layouts/modules/global-menu/index.vue
+++ b/src/layouts/modules/global-menu/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
+import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import VerticalMenu from './modules/vertical-menu.vue';
 import VerticalMixMenu from './modules/vertical-mix-menu.vue';
@@ -12,6 +13,7 @@ defineOptions({
   name: 'GlobalMenu'
 });
 
+const appStore = useAppStore();
 const themeStore = useThemeStore();
 
 const activeMenu = computed(() => {
@@ -24,10 +26,12 @@ const activeMenu = computed(() => {
 
   return menuMap[themeStore.layout.mode];
 });
+
+const reRenderVertical = computed(() => themeStore.layout.mode === 'vertical' && appStore.isMobile);
 </script>
 
 <template>
-  <component :is="activeMenu" />
+  <component :is="activeMenu" :key="reRenderVertical" />
 </template>
 
 <style scoped></style>