fix order of expansion, WIP hiding headers

src/components/settings_modal/settings_modal_user_content.js

@@ -75,7 +75,8 @@ const SettingsModalContent = {
   },
   data () {
     return {
-      navCollapsed: false
+      navCollapsed: false,
+      childCollapsed: false
     }
   },
   methods: {
@@ -96,10 +97,14 @@ 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()
     }
   },

src/components/settings_modal/settings_modal_user_content.vue

@@ -3,6 +3,7 @@
     ref="tabSwitcher"
     class="settings_tab-switcher"
     :scrollable-tabs="true"
+    :child-collapsed="childCollapsed"
     :body-scroll-lock="bodyLock"
   >
     <div
@@ -13,6 +14,7 @@
     >
       <GeneralTab
         class="inner-tab -middle"
+        ref="generalTab"
         :parent-collapsed="navCollapsed"
         @too-small="() => nestedTooSmall()"
         @too-big="() => nestedTooBig()"
@@ -27,6 +29,7 @@
     >
       <AppearanceTab
         class="inner-tab -middle"
+        :parent-collapsed="navCollapsed"
         @too-small="() => nestedTooSmall()"
         @too-big="() => nestedTooBig()"
       />

src/components/settings_modal/tabs/general_tab.js

@@ -136,6 +136,15 @@ const GeneralTab = {
           this.$store.dispatch('settingsSaved', { error })
         })
     },
+    tooSmall () {
+      this.$emit('tooSmall')
+    },
+    tooBig () {
+      this.$emit('tooBig')
+    },
+    getNavMode () {
+      return this.$refs.tabSwitcher.getNavMode()
+    },
     clearAssetCache () {
       this.clearCache(cacheKey)
     },

src/components/settings_modal/tabs/general_tab.vue

@@ -4,8 +4,8 @@
     ref="tabSwitcher"
     class="settings_tab-switcher"
     :parent-collapsed="parentCollapsed"
-    @too-small="() => $emit('tooSmall')"
+    @too-small="tooSmall"
-    @too-big="() => $emit('tooBig')"
+    @too-big="tooBig"
   >
     <div
       :label="$t('settings.behavior')"

src/components/tab_switcher/vertical_tab_switcher.jsx

@@ -37,6 +37,11 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    childCollapsed: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   emits: ['tooBig', 'tooSmall'],
@@ -44,7 +49,8 @@ export default {
     return {
       active: findFirstUsable(this.slots()),
       resizeHandler: null,
-      navMode: false
+      navMode: false,
+      navSide: 'content'
     }
   },
   computed: {
@@ -103,7 +109,7 @@ export default {
           this.$emit('tooSmall')
         }
       } else if (contentsWidth - navWidth >= tabContentWidth){
-        if (this.parentCollapsed) {
+        if (!this.navMode) {
           this.$emit('tooBig')
         } else {
           this.showNav()
@@ -122,12 +128,16 @@ export default {
         this.onSwitch.call(null, this.slots()[index].key)
       }
       this.active = index
+      this.navSide = 'content'
     },
     showNav () {
       this.navMode = false
     },
     hideNav () {
       this.navMode = true
+    },
+    getNavMode () {
+      return this.navMode
     }
   },
   render () {
@@ -173,8 +183,13 @@ export default {
         ? slot
         : ''
 
+      const headerClasses = ['tab-content-label']
+      if (this.childCollapsed) {
+        headerClasses.push('-hidden')
+      }
       const header = (
-        <h1 class="tab-content-label">
+        <h1 class={headerClasses}>
+          <button type="button" onClick={() => this.navSide = 'tabs'}>LOL</button>
           {props.label}
         </h1>
       )
@@ -192,7 +207,11 @@ export default {
     const rootClasses = ['vertical-tab-switcher']
     if (this.navMode) {
       rootClasses.push('-nav-mode')
-      rootClasses.push('-nav-content')
+      if (this.navSide === 'content') {
+        rootClasses.push('-nav-content')
+      } else {
+        rootClasses.push('-nav-tabs')
+      }
     }
 
     return (

src/components/tab_switcher/vertical_tab_switcher.scss

@@ -85,6 +85,10 @@
         > .tab-content-wrapper {
           > .tab-content-label {
             display: block;
+
+            &.-hidden {
+              display: none;
+            }
           }
         }
       }