improve settings components and scss

src/pages/AdminSettings.vue

@@ -26,11 +26,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :name="item.label"
         :active="item.section === section"
         @click="setSection(item.section)"
-      >
-      </NcAppNavigationItem>
+      />
     </NcAppNavigation>
     <NcAppContent class="cm-settings cm-settings--nav">
-      <SettingsSection :class="sectionClass('panel')">
+      <SettingsSection :hidden="section !== 'panel'">
         <SectionTitle label="Panel" />
 
         <SettingItem>
@@ -102,7 +101,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('topMenu')">
+      <SettingsSection :hidden="section !== 'topMenu'">
         <SectionTitle label="Top menu" />
 
         <SettingItem>
@@ -146,7 +145,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('apps')">
+      <SettingsSection :hidden="section !== 'apps'">
         <SectionTitle label="Applications" />
 
         <SettingItem>
@@ -179,7 +178,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('cats')">
+      <SettingsSection :hidden="section !== 'cats'">
         <SectionTitle label="Categories" />
 
         <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
@@ -226,7 +225,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('opener')">
+      <SettingsSection :hidden="section !== 'opener'">
         <SectionTitle label="Opener" />
 
         <SettingItem>
@@ -283,7 +282,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('colors')">
+      <SettingsSection :hidden="section !== 'colors'">
         <SectionTitle label="Colors" />
 
         <SettingItem>
@@ -420,7 +419,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('global')">
+      <SettingsSection :hidden="section !== 'global'">
         <p class="cm-settings-tips">
           <em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
         </p>
@@ -460,7 +459,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <AdminSaveButton :config="config" />
       </SettingsSection>
 
-      <SettingsSection :class="sectionClass('support')">
+      <SettingsSection :hidden="section !== 'support'">
         <SectionTitle label="Support" />
 
         <SettingItem>
@@ -481,7 +480,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
         <SettingItem>
           <SettingLabel label="Need help" />
-          <SettingValue class="button-inline">
+          <SettingValue class="cm-settings-button-inline">
             <a
               target="_blank"
               href="https://deblan.gitnet.page/side_menu_doc/"
@@ -537,11 +536,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <NcModal
               v-if="showConfig"
               @close="showConfig = false"
+              class="cm-settings-config-modal"
             >
               <div class="modal__content">
                 <p style="margin-bottom: 5px">{{ trans('Configuration:') }}</p>
                 <textarea
-                  class="config"
                   readonly
                   v-text="filterConfig(config)"
                 ></textarea>
@@ -621,12 +620,6 @@ const trans = (value) => {
   return t('side_menu', value)
 }
 
-const sectionClass = (value) => {
-  return {
-    hidden: value !== section.value,
-  }
-}
-
 const copyConfig = () => {
   navigator.clipboard.writeText(JSON.stringify(filterConfig(config.value), null, 2))
 
@@ -655,38 +648,3 @@ onMounted(async () => {
   setSection(sessionStorage.getItem('side_menu_section') ?? menu[0].section)
 })
 </script>
-
-<style scoped>
-.hidden {
-  display: none;
-}
-
-.button-inline button {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.config {
-  width: 100%;
-  height: 30vh;
-}
-
-.modal__content {
-  padding: 20px;
-}
-
-.modal__footer {
-  margin-top: 20px;
-  text-align: right;
-}
-
-.modal__footer button {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.save {
-  display: block;
-  float: right;
-}
-</style>