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-big="() => $emit('tooBig')"
+    @too-small="tooSmall"
+    @too-big="tooBig"
   >
     <div
       :label="$t('settings.behavior')"