diff --git a/src/layout/index.vue b/src/layout/index.vue
index 52d821b..04c7ef2 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -40,10 +40,13 @@ const classObj = computed(() => ({
 const { width, height } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
-watchEffect(() => {
+watch(() => device.value, () => {
   if (device.value === 'mobile' && sidebar.value.opened) {
     useAppStore().closeSideBar({ withoutAnimation: false })
   }
+})
+
+watchEffect(() => {
   if (width.value - 1 < WIDTH) {
     useAppStore().toggleDevice('mobile')
     useAppStore().closeSideBar({ withoutAnimation: true })