level 2 collapse

src/components/settings_modal/settings_modal_user_content.js

@@ -73,6 +73,11 @@ const SettingsModalContent = {
       return useInterfaceStore().layoutType === 'mobile'
     }
   },
+  data () {
+    return {
+      navCollapsed: false
+    }
+  },
   methods: {
     onOpen () {
       const targetTab = useInterfaceStore().settingsModalTargetTab
@@ -90,9 +95,11 @@ const SettingsModalContent = {
       useInterfaceStore().clearSettingsModalTargetTab()
     },
     nestedTooBig () {
+      this.navCollapsed = false
       this.$refs.tabSwitcher.showNav()
     },
     nestedTooSmall () {
+      this.navCollapsed = true
       this.$refs.tabSwitcher.hideNav()
     }
   },

src/components/settings_modal/settings_modal_user_content.vue

@@ -13,6 +13,7 @@
     >
       <GeneralTab
         class="inner-tab -middle"
+        :parent-collapsed="navCollapsed"
         @too-small="() => nestedTooSmall()"
         @too-big="() => nestedTooBig()"
       />

src/components/settings_modal/tabs/general_tab.js

@@ -35,6 +35,12 @@ library.add(
 )
 
 const GeneralTab = {
+  props: {
+    parentCollapsed: {
+      required: true,
+      type: Boolean
+    }
+  },
   data () {
     return {
       subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({

src/components/settings_modal/tabs/general_tab.vue

@@ -3,6 +3,7 @@
     :label="$t('settings.general')"
     ref="tabSwitcher"
     class="settings_tab-switcher"
+    :parent-collapsed="parentCollapsed"
     @too-small="() => $emit('tooSmall')"
     @too-big="() => $emit('tooBig')"
   >

src/components/tab_switcher/vertical_tab_switcher.jsx

@@ -32,6 +32,11 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    parentCollapsed: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   emits: ['tooBig', 'tooSmall'],
@@ -91,11 +96,18 @@ export default {
       const navWidth = this.$refs.nav?.clientWidth
       const contentsWidth = this.$refs.contents?.clientWidth
 
-
       if (contentsWidth < tabContentWidth) {
-        this.$emit('tooSmall')
+        if (this.parentCollapsed) {
+          this.hideNav()
+        } else {
+          this.$emit('tooSmall')
+        }
       } else if (contentsWidth - navWidth >= tabContentWidth){
-        this.$emit('tooBig')
+        if (this.parentCollapsed) {
+          this.$emit('tooBig')
+        } else {
+          this.showNav()
+        }
       }
     },
     // DO NOT put it to computed, it doesn't work (caching?)

src/components/tab_switcher/vertical_tab_switcher.scss

@@ -26,6 +26,10 @@
     flex: 1 1 auto;
     overflow-x: hidden;
 
+    .tab-content-label {
+      display: none
+    }
+
     .tab-content {
       align-self: center;
 
@@ -77,6 +81,14 @@
     }
 
     &.-nav-content {
+      > .contents {
+        > .tab-content-wrapper {
+          > .tab-content-label {
+            display: block;
+          }
+        }
+      }
+
       > .tabs {
         position: absolute;
         pointer-events: none;