Remove tabs and select navigation from settings index page

src/store/modules/settings.js

@@ -11,7 +11,6 @@ import _ from 'lodash'
 
 const settings = {
   state: {
-    activeTab: 'instance',
     configDisabled: true,
     db: {},
     description: [],
@@ -36,9 +35,6 @@ const settings = {
         state.updatedSettings = updatedSettings
       }
     },
-    SET_ACTIVE_TAB: (state, tab) => {
-      state.activeTab = tab
-    },
     SET_DESCRIPTION: (state, data) => {
       state.description = data
     },

src/views/settings/index.vue

@@ -29,31 +29,13 @@
             @select="handleSearchSelect"/>
         </div>
       </div>
-      <el-tabs v-model="activeTab" tab-position="left">
+      <component :is="componentName"/>
-        <el-tab-pane
-          v-for="(value, componentName) in tabs"
-          :label="$t(value.label)"
-          :disabled="configDisabled || settingsCantBeChanged(value.settings)"
-          :key="componentName"
-          :name="componentName"
-          lazy>
-          <component :is="componentName"/>
-        </el-tab-pane>
-      </el-tabs>
     </div>
     <div v-if="isMobile || isTablet">
       <div :class="isSidebarOpen" class="settings-header-container">
         <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
       </div>
       <div class="nav-container">
-        <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-            :disabled="configDisabled"/>
-        </el-select>
         <el-link
           :underline="false"
           href="https://docs-develop.pleroma.social/backend/administration/CLI_tasks/config/"
@@ -66,33 +48,13 @@
           </el-button>
         </el-link>
       </div>
-      <div class="settings-search-input-container"/>
+      <!-- <div class="settings-search-input-container"/> -->
-      <activity-pub v-if="activeTab === 'activityPub'"/>
+      <component :is="componentName"/>
-      <authentication v-if="activeTab === 'auth'"/>
-      <link-formatter v-if="activeTab === 'linkFormatter'"/>
-      <esshd v-if="activeTab === 'esshd'"/>
-      <captcha v-if="activeTab === 'captcha'"/>
-      <frontend v-if="activeTab === 'frontend'"/>
-      <gopher v-if="activeTab === 'gopher'"/>
-      <http v-if="activeTab === 'http'"/>
-      <instance v-if="activeTab === 'instance'"/>
-      <job-queue v-if="activeTab === 'jobQueue'"/>
-      <logger v-if="activeTab === 'logger'"/>
-      <mailer v-if="activeTab === 'mailer'"/>
-      <media-proxy v-if="activeTab === 'mediaProxy'"/>
-      <metadata v-if="activeTab === 'metadata'"/>
-      <mrf v-if="activeTab === 'mrf'"/>
-      <rate-limiters v-if="activeTab === 'rateLimiters'"/>
-      <relays v-if="activeTab === 'relays'"/>
-      <web-push v-if="activeTab === 'webPush'"/>
-      <upload v-if="activeTab === 'upload'"/>
-      <other v-if="activeTab === 'other'"/>
     </div>
   </div>
 </template>
 
 <script>
-import i18n from '@/lang'
 import { tabs } from './components/tabs'
 import {
   ActivityPub,
@@ -144,39 +106,12 @@ export default {
   },
   data() {
     return {
-      options: [
-        { value: 'activityPub', label: i18n.t('settings.activityPub') },
-        { value: 'auth', label: i18n.t('settings.auth') },
-        { value: 'linkFormatter', label: i18n.t('settings.linkFormatter') },
-        { value: 'esshd', label: i18n.t('settings.esshd') },
-        { value: 'captcha', label: i18n.t('settings.captcha') },
-        { value: 'frontend', label: i18n.t('settings.frontend') },
-        { value: 'gopher', label: i18n.t('settings.gopher') },
-        { value: 'http', label: i18n.t('settings.http') },
-        { value: 'instance', label: i18n.t('settings.instance') },
-        { value: 'jobQueue', label: i18n.t('settings.jobQueue') },
-        { value: 'logger', label: i18n.t('settings.logger') },
-        { value: 'mailer', label: i18n.t('settings.mailer') },
-        { value: 'mediaProxy', label: i18n.t('settings.mediaProxy') },
-        { value: 'metadata', label: i18n.t('settings.metadata') },
-        { value: 'mrf', label: i18n.t('settings.mrf') },
-        { value: 'rateLimiters', label: i18n.t('settings.rateLimiters') },
-        { value: 'relays', label: i18n.t('settings.relays') },
-        { value: 'webPush', label: i18n.t('settings.webPush') },
-        { value: 'upload', label: i18n.t('settings.upload') },
-        { value: 'other', label: i18n.t('settings.other') }
-      ],
       searchQuery: ''
     }
   },
   computed: {
-    activeTab: {
+    componentName() {
-      get() {
+      return this.$route.path.split('/settings/').pop()
-        return this.$store.state.settings.activeTab
-      },
-      set(tab) {
-        this.$store.dispatch('SetActiveTab', tab)
-      }
     },
     configDisabled() {
       return this.$store.state.settings.configDisabled

src/views/settings/styles/main.scss

@@ -550,10 +550,6 @@
     .settings-search-input-container {
       margin: 0 15px 15px 15px;
     }
-    .settings-menu {
-      width: 163px;
-      margin-right: 5px;
-    }
     .socks5-checkbox-container {
       width: 100%;
     }