diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index 4f6ffe4fb..55f2a9ce9 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -96,15 +96,18 @@ const SettingsModalContent = {
       useInterfaceStore().clearSettingsModalTargetTab()
     },
     nestedTooBig () {
-      this.navCollapsed = false
-      this.$refs.tabSwitcher.showNav()
+      if (this.navCollapsed) {
+        this.navCollapsed = false
+        this.$refs.tabSwitcher.showNav()
+      }
     },
     nestedTooSmall () {
-      this.navCollapsed = true
-      this.$refs.tabSwitcher.hideNav()
+      if (!this.navCollapsed) {
+        this.navCollapsed = true
+        this.$refs.tabSwitcher.hideNav()
+      }
     },
     nestedNavSide (side) {
-      console.log('SWITCH')
       this.navHideHeader = side === 'content'
     }
   },
diff --git a/src/components/tab_switcher/vertical_tab_switcher.jsx b/src/components/tab_switcher/vertical_tab_switcher.jsx
index bb3fb7305..9341b2d77 100644
--- a/src/components/tab_switcher/vertical_tab_switcher.jsx
+++ b/src/components/tab_switcher/vertical_tab_switcher.jsx
@@ -104,24 +104,35 @@ export default {
       this.changeNavSide('content')
     },
     showNav () {
-      this.navMode = false
+      if (this.navMode) {
+        this.navMode = false
+        this.changeNavSide(null)
+        this.onResize()
+      }
     },
     hideNav () {
-      this.navMode = true
+      if (!this.navMode) {
+        this.navMode = true
+        this.changeNavSide('content')
+        this.onResize()
+      }
     },
     changeNavSide (side) {
-      this.navSide = side
-      this.$emit('sideSwitch', side)
+      if (this.navSide !== side) {
+        this.navSide = side
+        this.$emit('sideSwitch', side)
+      }
     },
     getNavMode () {
       return this.navMode
     },
     onResize () {
       // All other tabs are hidden and their width is most likely 0
-      const tabContent = this.$refs.contents?.querySelector('.tab-content-wrapper.-active .tab-content')
+      const tabContent = this.$refs.contents.querySelector('.tab-content-wrapper.-active .tab-content')
       const tabContentWidth = tabContent.clientWidth
-      const navWidth = this.$refs.nav?.clientWidth
-      const contentsWidth = this.$refs.contents?.clientWidth
+
+      const navWidth = this.$refs.nav.clientWidth
+      const contentsWidth = this.$refs.contents.clientWidth
 
       // if contents takes more space than its container
       if (contentsWidth < tabContentWidth) {
@@ -193,8 +204,8 @@ export default {
         : ''
 
       const headerClasses = ['tab-content-label']
-      console.log(this.hideHeader)
-      if (this.hideHeader) {
+      if (this.hideHeader === true) {
+        console.log('A', this.hideHeader)
         headerClasses.push('-hidden')
       }
       const header = (