From a04f5400a5ad6c91ffa287e47e172b214d17b4f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 23 Mar 2023 14:46:20 +0100
Subject: [PATCH] Make sidebar mobile mode reactive

---
 .../src/components/navigation/CSidebar.vue    | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/lib/vue/src/components/navigation/CSidebar.vue b/lib/vue/src/components/navigation/CSidebar.vue
index 7baf5dfc2..f77cae13a 100644
--- a/lib/vue/src/components/navigation/CSidebar.vue
+++ b/lib/vue/src/components/navigation/CSidebar.vue
@@ -188,7 +188,8 @@ export default {
 
   data () {
     return {
-      sidebar_settings : {}
+      sidebarSettings : {},
+      isMobile: false,
     }
   },
 
@@ -212,21 +213,21 @@ export default {
         this.$emit('update:pinned', pinned)
       },
     },
-
-    isMobile () {
-      return window.innerWidth < 1024 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
-    },
   },
 
   created () {
+    this.checkIfMobile()
+
     this.$root.$on('close-sidebar', () => {
       this.isExpanded = false
       this.isPinned = false
     })
+    window.addEventListener('resize', this.checkIfMobile)
   },
 
   beforeDestroy () {
     this.$root.$off('close-sidebar')
+    window.removeEventListener('resize', this.checkIfMobile)
   },
 
   watch: {
@@ -239,6 +240,10 @@ export default {
   },
 
   methods: {
+    checkIfMobile: throttle(function () {
+      this.isMobile = window.innerWidth < 1024 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+    }, 500),
+
     checkSidebar () {
       // If sidebar should be disabled on route, close and unpin when navigating to route
       if (this.disabledRoutes.includes(this.$route.name)) {
@@ -263,9 +268,9 @@ export default {
     },
 
     defaultSidebarAppearance () {
-      const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebar_settings'))
+      const localstorage_settings = JSON.parse(window.localStorage.getItem('sidebarSettings'))
       if (localstorage_settings) {
-        this.sidebar_settings = localstorage_settings
+        this.sidebarSettings = localstorage_settings
       }
       const app_sidebar = (localstorage_settings || {})[this.$root.$options.name]
       if (!this.isMobile) {
@@ -281,12 +286,12 @@ export default {
     },
 
     saveSettings (pinned) {
-      if (this.sidebar_settings[this.$root.$options.name]) {
-        this.sidebar_settings[this.$root.$options.name].pinned = pinned
+      if (this.sidebarSettings[this.$root.$options.name]) {
+        this.sidebarSettings[this.$root.$options.name].pinned = pinned
       } else {
-        this.sidebar_settings[this.$root.$options.name] = { pinned: pinned }
+        this.sidebarSettings[this.$root.$options.name] = { pinned: pinned }
       }
-      window.localStorage.setItem('sidebar_settings', JSON.stringify(this.sidebar_settings))
+      window.localStorage.setItem('sidebarSettings', JSON.stringify(this.sidebarSettings))
     },
 
     openSidebar () {