better impl of header hiding?

src/components/settings_modal/settings_modal_user_content.js

@@ -76,7 +76,7 @@ const SettingsModalContent = {
   data () {
     return {
       navCollapsed: false,
-      childCollapsed: false
+      navHideHeader: false
     }
   },
   methods: {
@@ -97,15 +97,15 @@ const SettingsModalContent = {
     },
     nestedTooBig () {
       this.navCollapsed = false
-      this.childCollapsed = this.$refs.generalTab.getNavMode()
-      console.log(this.navCollapsed, this.childCollapsed)
       this.$refs.tabSwitcher.showNav()
     },
     nestedTooSmall () {
       this.navCollapsed = true
-      this.childCollapsed = this.$refs.generalTab.getNavMode()
-      console.log(this.navCollapsed, this.childCollapsed)
       this.$refs.tabSwitcher.hideNav()
+    },
+    nestedNavSide (side) {
+      console.log('SWITCH')
+      this.navHideHeader = side === 'content'
     }
   },
   mounted () {

src/components/settings_modal/settings_modal_user_content.vue

@@ -5,6 +5,7 @@
     :scrollable-tabs="true"
     :child-collapsed="childCollapsed"
     :body-scroll-lock="bodyLock"
+    :hide-header="navHideHeader"
   >
     <div
       :full-width="true"
@@ -16,6 +17,7 @@
         class="inner-tab -middle"
         ref="generalTab"
         :parent-collapsed="navCollapsed"
+        @side-switch="(side) => nestedNavSide(side)"
         @too-small="() => nestedTooSmall()"
         @too-big="() => nestedTooBig()"
       />

src/components/tab_switcher/vertical_tab_switcher.jsx

@@ -37,13 +37,17 @@ export default {
       required: false,
       type: Boolean,
       default: null
+    },
+    hideHeader: {
+      required: false,
+      type: Boolean,
+      default: null
     }
   },
-  emits: ['tooBig', 'tooSmall'],
+  emits: ['tooBig', 'tooSmall', 'sideSwitch'],
   data () {
     return {
       active: findFirstUsable(this.slots()),
-      childCollapsed: null,
       resizeHandler: null,
       navMode: false,
       navSide: 'content'
@@ -89,7 +93,7 @@ export default {
       return (e) => {
         e.preventDefault()
         this.setTab(index)
-        onResize()
+        this.onResize()
       }
     },
     setTab (index) {
@@ -97,7 +101,7 @@ export default {
         this.onSwitch.call(null, this.slots()[index].key)
       }
       this.active = index
-      this.navSide = 'content'
+      this.changeNavSide('content')
     },
     showNav () {
       this.navMode = false
@@ -105,6 +109,10 @@ export default {
     hideNav () {
       this.navMode = true
     },
+    changeNavSide (side) {
+      this.navSide = side
+      this.$emit('sideSwitch', side)
+    },
     getNavMode () {
       return this.navMode
     },
@@ -115,11 +123,6 @@ export default {
       const navWidth = this.$refs.nav?.clientWidth
       const contentsWidth = this.$refs.contents?.clientWidth
 
-      const nestedSwitcher = this.$refs.contents?.querySelector('.vertical-tab-switcher')
-      if (nestedSwitcher) {
-        const childHeader = nestedSwitcher.querySelector('.tab-content-label')
-        this.childCollapsed = childHeader?.checkVisibility()
-      }
       // if contents takes more space than its container
       if (contentsWidth < tabContentWidth) {
         if (this.parentCollapsed) {
@@ -190,12 +193,13 @@ export default {
         : ''
 
       const headerClasses = ['tab-content-label']
-      if (this.childCollapsed) {
+      console.log(this.hideHeader)
+      if (this.hideHeader) {
         headerClasses.push('-hidden')
       }
       const header = (
         <h1 class={headerClasses}>
-          <button type="button" onClick={() => this.navSide = 'tabs'}>LOL</button>
+          <button type="button" onClick={() => this.changeNavSide('tabs')}>LOL</button>
           {props.label}
         </h1>
       )