[Bug]: 移动端界面时，左侧菜单无法显示

[JamesY-Jey]

点击切换菜单显示的按钮，调用 Navbar.vue 中的 toggleSideBar方法时，同时触发了 layout/index.vue 中的 sidebar.value.opened watchEffect监听，导致重复close，无法显示菜单 以下修改可正常显示：

+ watch(() => useRoute(), () => {
+   if (device.value === 'mobile' && sidebar.value.opened) {
+     useAppStore().closeSideBar({ withoutAnimation: false })
+   }
+ })

watchEffect(() => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
-  }
  if (width.value - 1 < WIDTH) {
    useAppStore().toggleDevice('mobile')
    useAppStore().closeSideBar({ withoutAnimation: true })
  } else {
    useAppStore().toggleDevice('desktop')
  }
})

[jinceon]

感谢。我也遇到这个问题了。

[arm-liang]

不需要监听多余的路由切换，只需要监听device，就好了

watch(()=> device.value, ()=>{
  if (device.value === 'mobile' && sidebar.value.opened) {
    useAppStore().closeSideBar({ withoutAnimation: false })
  }
},{immediate:true})

点击切换菜单显示的按钮，调用 Navbar.vue 中的 toggleSideBar方法时，同时触发了 layout/index.vue 中的 sidebar.value.opened watchEffect监听，导致重复close，无法显示菜单 以下修改可正常显示：

+ watch(() => useRoute(), () => {
+   if (device.value === 'mobile' && sidebar.value.opened) {
+     useAppStore().closeSideBar({ withoutAnimation: false })
+   }
+ })

watchEffect(() => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
-  }
  if (width.value - 1 < WIDTH) {
    useAppStore().toggleDevice('mobile')
    useAppStore().closeSideBar({ withoutAnimation: true })
  } else {
    useAppStore().toggleDevice('desktop')
  }
})

[yangzongzhuan]

多谢提醒，已修改。