From c8194a4dccdd9d7dd5fc5a7c1161b6109cf49273 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Mon, 14 Apr 2025 17:54:37 +0200
Subject: [PATCH] improve settings components and scss

---
 .../{TableRow.vue => SettingItem.vue}         |   4 +-
 .../{TableLabel.vue => SettingLabel.vue}      |   8 +-
 .../{TableValue.vue => SettingValue.vue}      |   0
 ...TableContainer.vue => SettingsSection.vue} |   2 +-
 .../settings/form/FormAppCategory.vue         | 344 ++++++-------
 .../settings/form/FormAppPicker.vue           |  93 ++--
 src/components/settings/form/FormAppSort.vue  |  94 ++--
 src/components/settings/form/FormCatSort.vue  | 100 ++--
 .../settings/form/FormColorPicker.vue         |   4 +-
 .../settings/form/FormDisplayPicker.vue       | 102 ++--
 src/components/settings/form/FormOpener.vue   |   1 +
 src/components/settings/form/FormRange.vue    |  29 +-
 src/components/settings/form/FormSelect.vue   |   2 +-
 src/components/settings/form/FormSize.vue     |   1 +
 src/components/settings/form/FormYesNo.vue    |   1 +
 src/pages/AdminSettings.vue                   | 463 +++++++++---------
 src/pages/UserSettings.vue                    |  86 ++--
 src/scss/admin.scss                           | 421 ++++++++--------
 18 files changed, 804 insertions(+), 951 deletions(-)
 rename src/components/settings/{TableRow.vue => SettingItem.vue} (90%)
 rename src/components/settings/{TableLabel.vue => SettingLabel.vue} (89%)
 rename src/components/settings/{TableValue.vue => SettingValue.vue} (100%)
 rename src/components/settings/{TableContainer.vue => SettingsSection.vue} (94%)

diff --git a/src/components/settings/TableRow.vue b/src/components/settings/SettingItem.vue
similarity index 90%
rename from src/components/settings/TableRow.vue
rename to src/components/settings/SettingItem.vue
index 42b7a0d..ae7f8f9 100644
--- a/src/components/settings/TableRow.vue
+++ b/src/components/settings/SettingItem.vue
@@ -16,8 +16,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="side-menu-setting-row"
-    :class="{ 'side-menu-setting-row--disabled': disabled }"
+    class="cm-settings-item"
+    :class="{ 'cm-settings-item--disabled': disabled }"
   >
     <slot></slot>
   </div>
diff --git a/src/components/settings/TableLabel.vue b/src/components/settings/SettingLabel.vue
similarity index 89%
rename from src/components/settings/TableLabel.vue
rename to src/components/settings/SettingLabel.vue
index e808fa1..a01b052 100644
--- a/src/components/settings/TableLabel.vue
+++ b/src/components/settings/SettingLabel.vue
@@ -16,11 +16,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <div
-    class="side-menu-setting-label"
+    class="cm-settings-item-label"
     :class="{
-      'side-menu-setting-label-short': short,
-      'side-menu-setting-label--top': top,
-      'side-menu-setting-label--middle': middle,
+      'cm-settings-item-label--short': short,
+      'cm-settings-item-label--top': top,
+      'cm-settings-item-label--middle': middle,
     }"
   >
     {{ t('side_menu', label) }}
diff --git a/src/components/settings/TableValue.vue b/src/components/settings/SettingValue.vue
similarity index 100%
rename from src/components/settings/TableValue.vue
rename to src/components/settings/SettingValue.vue
diff --git a/src/components/settings/TableContainer.vue b/src/components/settings/SettingsSection.vue
similarity index 94%
rename from src/components/settings/TableContainer.vue
rename to src/components/settings/SettingsSection.vue
index 1994b31..019e7d9 100644
--- a/src/components/settings/TableContainer.vue
+++ b/src/components/settings/SettingsSection.vue
@@ -15,7 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="side-menu-setting-table">
+  <div class="cs-settings-section">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/settings/form/FormAppCategory.vue b/src/components/settings/form/FormAppCategory.vue
index 0b6a693..d2f2bc5 100644
--- a/src/components/settings/form/FormAppCategory.vue
+++ b/src/components/settings/form/FormAppCategory.vue
@@ -15,161 +15,163 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <NcButton
-    aria-label="t('side_menu', 'Customize')"
-    variant="primary"
-    @click="openModal"
-  >
-    {{ t('side_menu', 'Customize') }}
-  </NcButton>
+  <div class="cm-settings-form-appcategory">
+    <NcButton
+      aria-label="t('side_menu', 'Customize')"
+      variant="primary"
+      @click="openModal"
+    >
+      {{ t('side_menu', 'Customize') }}
+    </NcButton>
 
-  <NcModal
-    v-if="modal"
-    _size="small"
-    @close="closeModal"
-  >
-    <div class="modal__content">
-      <div class="menu">
-        <NcButton
-          aria-label="t('side_menu', 'Categories')"
-          :variant="section === 'cats' ? 'primary' : 'secondary'"
-          @click="setSection('cats')"
-        >
-          {{ t('side_menu', 'Categories') }}
-        </NcButton>
-        <NcButton
-          aria-label="t('side_menu', 'Applications')"
-          :variant="section === 'apps' ? 'primary' : 'secondary'"
-          @click="setSection('apps')"
-        >
-          {{ t('side_menu', 'Applications') }}
-        </NcButton>
-      </div>
+    <NcModal
+      v-if="modal"
+      class="cm-settings-form-appcategory-modal"
+      @close="closeModal"
+    >
+      <div class="modal__content">
+        <div class="menu">
+          <NcButton
+            aria-label="t('side_menu', 'Categories')"
+            :variant="section === 'cats' ? 'primary' : 'secondary'"
+            @click="setSection('cats')"
+          >
+            {{ t('side_menu', 'Categories') }}
+          </NcButton>
+          <NcButton
+            aria-label="t('side_menu', 'Applications')"
+            :variant="section === 'apps' ? 'primary' : 'secondary'"
+            @click="setSection('apps')"
+          >
+            {{ t('side_menu', 'Applications') }}
+          </NcButton>
+        </div>
 
-      <div v-if="section === 'cats'">
-        <table
-          v-if="!newCustomCategory && editCustomCategoryKey === null"
-          width="100%"
-        >
-          <tbody>
-            <tr
-              v-for="(item, key) in categoriesCustom"
-              :key="key"
-            >
-              <td>{{ item[langs[0]] }}</td>
-              <td width="50px">
-                <NcActions>
-                  <NcActionButton
-                    icon="icon-edit"
-                    @click="editCustomCategory(key)"
-                  ></NcActionButton>
-                  <NcActionButton
-                    icon="icon-delete"
-                    @click="removeCustomCategory(key)"
-                  ></NcActionButton>
-                </NcActions>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div
-          v-else
-          class="form"
-        >
-          <template v-if="newCustomCategory">
-            <NcTextField
-              v-for="lang in langs"
-              :key="lang"
-              v-model="newCustomCategory[lang]"
-              :label="lang"
-            />
-          </template>
-          <template v-if="editCustomCategoryKey !== null">
-            <NcTextField
-              v-for="lang in langs"
-              :key="lang"
-              v-model="categoriesCustom[editCustomCategoryKey][lang]"
-              :label="lang"
-            />
+        <div v-if="section === 'cats'">
+          <table
+            v-if="!newCustomCategory && editCustomCategoryKey === null"
+            width="100%"
+          >
+            <tbody>
+              <tr
+                v-for="(item, key) in categoriesCustom"
+                :key="key"
+              >
+                <td>{{ item[langs[0]] }}</td>
+                <td width="50px">
+                  <NcActions>
+                    <NcActionButton
+                      icon="icon-edit"
+                      @click="editCustomCategory(key)"
+                    ></NcActionButton>
+                    <NcActionButton
+                      icon="icon-delete"
+                      @click="removeCustomCategory(key)"
+                    ></NcActionButton>
+                  </NcActions>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div
+            v-else
+            class="form"
+          >
+            <template v-if="newCustomCategory">
+              <NcTextField
+                v-for="lang in langs"
+                :key="lang"
+                v-model="newCustomCategory[lang]"
+                :label="lang"
+              />
+            </template>
+            <template v-if="editCustomCategoryKey !== null">
+              <NcTextField
+                v-for="lang in langs"
+                :key="lang"
+                v-model="categoriesCustom[editCustomCategoryKey][lang]"
+                :label="lang"
+              />
+            </template>
+          </div>
+        </div>
+
+        <div v-if="section === 'apps'">
+          <table width="100%">
+            <tbody>
+              <tr
+                v-for="item in apps"
+                :key="item.id"
+              >
+                <td>
+                  <img
+                    :src="item.icon"
+                    :alt="item.name"
+                  />
+                  {{ item.name }}
+                </td>
+                <td width="50%">
+                  <FormSelect
+                    v-model="appsCategoriesCustom[item.id]"
+                    :options="getOptions(categoriesCustom)"
+                    :required="false"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="modal__footer">
+          <template v-if="section === 'cats'">
+            <template v-if="newCustomCategory">
+              <NcActions>
+                <NcActionButton
+                  icon="icon-close"
+                  @click="cancelCustomCategory"
+                ></NcActionButton>
+              </NcActions>
+              <NcActions>
+                <NcActionButton
+                  icon="icon-checkmark"
+                  @click="saveCustomCategory"
+                ></NcActionButton>
+              </NcActions>
+            </template>
+            <template v-if="editCustomCategoryKey !== null">
+              <NcActions>
+                <NcActionButton
+                  icon="icon-close"
+                  @click="cancelCustomCategory"
+                ></NcActionButton>
+              </NcActions>
+            </template>
+            <template v-else>
+              <NcActions>
+                <NcActionButton
+                  v-if="!newCustomCategory && editCustomCategoryKey === null"
+                  icon="icon-add"
+                  @click="addCustomCategory"
+                ></NcActionButton>
+                <NcActionButton
+                  v-if="editCustomCategoryKey !== null"
+                  icon="icon-checkmark"
+                  @click="saveCustomCategory"
+                ></NcActionButton>
+              </NcActions>
+            </template>
           </template>
+          <NcButton
+            variant="primary"
+            class="btn-close"
+            @click="closeModal"
+          >
+            {{ t('side_menu', 'Close') }}
+          </NcButton>
         </div>
       </div>
-
-      <div v-if="section === 'apps'">
-        <table width="100%">
-          <tbody>
-            <tr
-              v-for="item in apps"
-              :key="item.id"
-            >
-              <td>
-                <img
-                  :src="item.icon"
-                  :alt="item.name"
-                />
-                {{ item.name }}
-              </td>
-              <td width="50%">
-                <FormSelect
-                  v-model="appsCategoriesCustom[item.id]"
-                  :options="getOptions(categoriesCustom)"
-                  :required="false"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="modal__footer">
-        <template v-if="section === 'cats'">
-          <template v-if="newCustomCategory">
-            <NcActions>
-              <NcActionButton
-                icon="icon-close"
-                @click="cancelCustomCategory"
-              ></NcActionButton>
-            </NcActions>
-            <NcActions>
-              <NcActionButton
-                icon="icon-checkmark"
-                @click="saveCustomCategory"
-              ></NcActionButton>
-            </NcActions>
-          </template>
-          <template v-if="editCustomCategoryKey !== null">
-            <NcActions>
-              <NcActionButton
-                icon="icon-close"
-                @click="cancelCustomCategory"
-              ></NcActionButton>
-            </NcActions>
-          </template>
-          <template v-else>
-            <NcActions>
-              <NcActionButton
-                v-if="!newCustomCategory && editCustomCategoryKey === null"
-                icon="icon-add"
-                @click="addCustomCategory"
-              ></NcActionButton>
-              <NcActionButton
-                v-if="editCustomCategoryKey !== null"
-                icon="icon-checkmark"
-                @click="saveCustomCategory"
-              ></NcActionButton>
-            </NcActions>
-          </template>
-        </template>
-        <NcButton
-          variant="primary"
-          class="btn-close"
-          @click="closeModal"
-        >
-          {{ t('side_menu', 'Close') }}
-        </NcButton>
-      </div>
-    </div>
-  </NcModal>
+    </NcModal>
+  </div>
 </template>
 
 <script setup>
@@ -296,45 +298,3 @@ onMounted(async () => {
   emit('update:appsCategoriesCustom', value)
 })
 </script>
-
-<style scoped>
-.modal__content {
-  padding: 20px;
-}
-
-.menu button {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.modal__footer {
-  margin-top: 20px;
-  text-align: right;
-}
-
-.modal__footer button {
-  display: inline-block;
-}
-
-td {
-  padding: 5px 0;
-}
-
-tr:hover,
-td:hover {
-  background: none !important;
-}
-
-.form {
-  padding: 10px 0;
-}
-
-img {
-  width: 15px;
-  height: 15px;
-}
-
-.btn-close {
-  margin-left: 20px;
-}
-</style>
diff --git a/src/components/settings/form/FormAppPicker.vue b/src/components/settings/form/FormAppPicker.vue
index 8cda708..00df64b 100644
--- a/src/components/settings/form/FormAppPicker.vue
+++ b/src/components/settings/form/FormAppPicker.vue
@@ -15,44 +15,47 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <NcButton
-    aria-label="t('side_menu', 'Select apps')"
-    variant="primary"
-    @click="openModal"
-  >
-    {{ t('side_menu', 'Select apps') }} ({{ model.length }})
-  </NcButton>
+  <div class="cm-settings-form-apppicker">
+    <NcButton
+      aria-label="t('side_menu', 'Select apps')"
+      variant="primary"
+      @click="openModal"
+    >
+      {{ t('side_menu', 'Select apps') }} ({{ model.length }})
+    </NcButton>
 
-  <NcModal
-    v-if="modal"
-    size="small"
-    @close="closeModal"
-  >
-    <div class="modal__content">
-      <NcCheckboxRadioSwitch
-        v-for="(item, key) in apps"
-        :key="key"
-        v-model="model"
-        name="value"
-        :value="item.id"
-      >
-        <img
-          :src="item.icon"
-          :alt="item.name"
-        />
-        {{ item.name }}
-      </NcCheckboxRadioSwitch>
-
-      <div class="modal__footer">
-        <NcButton
-          variant="primary"
-          @click="closeModal"
+    <NcModal
+      v-if="modal"
+      size="small"
+      class="cm-settings-form-apppicker-modal"
+      @close="closeModal"
+    >
+      <div class="modal__content">
+        <NcCheckboxRadioSwitch
+          v-for="(item, key) in apps"
+          :key="key"
+          v-model="model"
+          name="value"
+          :value="item.id"
         >
-          {{ t('side_menu', 'Close') }}
-        </NcButton>
+          <img
+            :src="item.icon"
+            :alt="item.name"
+          />
+          {{ item.name }}
+        </NcCheckboxRadioSwitch>
+
+        <div class="modal__footer">
+          <NcButton
+            variant="primary"
+            @click="closeModal"
+          >
+            {{ t('side_menu', 'Close') }}
+          </NcButton>
+        </div>
       </div>
-    </div>
-  </NcModal>
+    </NcModal>
+  </div>
 </template>
 
 <script setup>
@@ -77,23 +80,3 @@ onMounted(async () => {
   apps.value = await navStore.getCoreApps()
 })
 </script>
-
-<style scoped>
-.modal__content {
-  padding: 20px;
-}
-
-.modal__footer {
-  margin-top: 20px;
-  text-align: right;
-}
-
-.modal__footer button {
-  display: inline-block;
-}
-
-img {
-  width: 15px;
-  height: 15px;
-}
-</style>
diff --git a/src/components/settings/form/FormAppSort.vue b/src/components/settings/form/FormAppSort.vue
index 9429c82..7a2dec3 100644
--- a/src/components/settings/form/FormAppSort.vue
+++ b/src/components/settings/form/FormAppSort.vue
@@ -15,43 +15,46 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <NcButton
-    aria-label="t('side_menu', 'Sort')"
-    variant="primary"
-    @click="openModal"
-  >
-    {{ t('side_menu', 'Sort') }}
-  </NcButton>
+  <div class="cm-settings-form-appsort">
+    <NcButton
+      aria-label="t('side_menu', 'Sort')"
+      variant="primary"
+      @click="openModal"
+    >
+      {{ t('side_menu', 'Sort') }}
+    </NcButton>
 
-  <NcModal
-    v-if="modal"
-    size="small"
-    @close="closeModal"
-  >
-    <div class="modal__content">
-      <draggable
-        v-model="apps"
-        item-key="id"
-        @end="update"
-      >
-        <template #item="{ element }">
-          <div class="draggable">
-            <span class="arrow">⇅</span>
-            {{ element.name }}
-          </div>
-        </template>
-      </draggable>
-
-      <div class="modal__footer">
-        <NcButton
-          variant="primary"
-          @click="closeModal"
+    <NcModal
+      v-if="modal"
+      size="small"
+      class="cm-settings-form-appsort-modal"
+      @close="closeModal"
+    >
+      <div class="modal__content">
+        <draggable
+          v-model="apps"
+          item-key="id"
+          @end="update"
         >
-          {{ t('side_menu', 'Close') }}
-        </NcButton>
+          <template #item="{ element }">
+            <div class="cm-settings-form-draggable">
+              <span class="cm-settings-form-arrow">⇅</span>
+              {{ element.name }}
+            </div>
+          </template>
+        </draggable>
+
+        <div class="modal__footer">
+          <NcButton
+            variant="primary"
+            @click="closeModal"
+          >
+            {{ t('side_menu', 'Close') }}
+          </NcButton>
+        </div>
       </div>
-    </div>
-  </NcModal>
+    </NcModal>
+  </div>
 </template>
 
 <script setup>
@@ -111,26 +114,3 @@ onMounted(async () => {
   }, 500)
 })
 </script>
-
-<style scoped>
-.modal__footer {
-  text-align: right;
-  padding: 20px;
-}
-
-.modal__footer button {
-  display: inline-block;
-}
-
-.draggable {
-  cursor: pointer;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.arrow {
-  color: var(--color-text-maxcontrast);
-  display: inline-block;
-  margin-right: 3px;
-}
-</style>
diff --git a/src/components/settings/form/FormCatSort.vue b/src/components/settings/form/FormCatSort.vue
index cdbd7f7..b335228 100644
--- a/src/components/settings/form/FormCatSort.vue
+++ b/src/components/settings/form/FormCatSort.vue
@@ -15,46 +15,49 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <NcButton
-    aria-label="t('side_menu', 'Sort')"
-    variant="primary"
-    @click="openModal"
-  >
-    {{ t('side_menu', 'Sort') }}
-  </NcButton>
+  <div class="cm-settings-form-catsort">
+    <NcButton
+      aria-label="t('side_menu', 'Sort')"
+      variant="primary"
+      @click="openModal"
+    >
+      {{ t('side_menu', 'Sort') }}
+    </NcButton>
 
-  <NcModal
-    v-if="modal"
-    size="small"
-    @close="closeModal"
-  >
-    <div class="modal__content">
-      <draggable
-        v-model="apps"
-        item-key="categoryId"
-        @end="update"
-      >
-        <template #item="{ element }">
-          <div
-            v-if="element.name !== ''"
-            class="draggable"
-          >
-            <span class="arrow">⇅</span>
-            {{ element.name }}
-          </div>
-        </template>
-      </draggable>
-
-      <div class="modal__footer">
-        <NcButton
-          variant="primary"
-          @click="closeModal"
+    <NcModal
+      v-if="modal"
+      size="small"
+      class="cm-settings-form-catsort-modal"
+      @close="closeModal"
+    >
+      <div class="modal__content">
+        <draggable
+          v-model="apps"
+          item-key="categoryId"
+          @end="update"
         >
-          {{ t('side_menu', 'Close') }}
-        </NcButton>
+          <template #item="{ element }">
+            <div
+              v-if="element.name !== ''"
+              class="cm-settings-form-draggable"
+            >
+              <span class="cm-settings-form-arrow">⇅</span>
+              {{ element.name }}
+            </div>
+          </template>
+        </draggable>
+
+        <div class="modal__footer">
+          <NcButton
+            variant="primary"
+            @click="closeModal"
+          >
+            {{ t('side_menu', 'Close') }}
+          </NcButton>
+        </div>
       </div>
-    </div>
-  </NcModal>
+    </NcModal>
+  </div>
 </template>
 
 <script setup>
@@ -114,26 +117,3 @@ onMounted(async () => {
   }, 500)
 })
 </script>
-
-<style scoped>
-.modal__footer {
-  padding: 20px;
-  text-align: right;
-}
-
-.modal__footer button {
-  display: inline-block;
-}
-
-.draggable {
-  cursor: pointer;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.arrow {
-  color: var(--color-text-maxcontrast);
-  display: inline-block;
-  margin-right: 3px;
-}
-</style>
diff --git a/src/components/settings/form/FormColorPicker.vue b/src/components/settings/form/FormColorPicker.vue
index 53e4f56..d13d578 100644
--- a/src/components/settings/form/FormColorPicker.vue
+++ b/src/components/settings/form/FormColorPicker.vue
@@ -17,11 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <NcColorPicker
     v-model="model"
-    class="side-menu-setting-color-picker"
+    class="cm-settings-form-colorpicker"
   >
     <div
       :style="{ 'background-color': model }"
-      class="side-menu-setting-color-picker-value"
+      class="cm-settings-form-colorpicker-value"
     />
   </NcColorPicker>
 </template>
diff --git a/src/components/settings/form/FormDisplayPicker.vue b/src/components/settings/form/FormDisplayPicker.vue
index ebf7a72..416c776 100644
--- a/src/components/settings/form/FormDisplayPicker.vue
+++ b/src/components/settings/form/FormDisplayPicker.vue
@@ -1,51 +1,50 @@
 <template>
-  <NcButton
-    :variant="is(false, false, false) ? 'primary' : 'seconday'"
-    @click="update(false, false, false)"
-  >
-    {{ t('side_menu', 'Default') }}
-  </NcButton>
-  <NcButton
-    :variant="is(true, false, false) ? 'primary' : 'seconday'"
-    @click="update(true, false, false)"
-  >
-    {{ t('side_menu', 'Always displayed') }}
-  </NcButton>
-  <NcButton
-    :variant="is(false, true, false) ? 'primary' : 'seconday'"
-    @click="update(false, true, false)"
-  >
-    {{ t('side_menu', 'Big menu') }}
-  </NcButton>
-  <NcButton
-    :variant="is(false, false, true) ? 'primary' : 'seconday'"
-    @click="update(false, false, true)"
-  >
-    {{ t('side_menu', 'With categories') }}
-  </NcButton>
+  <div class="cm-settings-form-displaypicker">
+    <NcButton
+      :variant="is(false, false, false) ? 'primary' : 'seconday'"
+      @click="update(false, false, false)"
+    >
+      {{ t('side_menu', 'Default') }}
+    </NcButton>
+    <NcButton
+      :variant="is(true, false, false) ? 'primary' : 'seconday'"
+      @click="update(true, false, false)"
+    >
+      {{ t('side_menu', 'Always displayed') }}
+    </NcButton>
+    <NcButton
+      :variant="is(false, true, false) ? 'primary' : 'seconday'"
+      @click="update(false, true, false)"
+    >
+      {{ t('side_menu', 'Big menu') }}
+    </NcButton>
+    <NcButton
+      :variant="is(false, false, true) ? 'primary' : 'seconday'"
+      @click="update(false, false, true)"
+    >
+      {{ t('side_menu', 'With categories') }}
+    </NcButton>
 
-  <p>
-    <img
-      v-if="is(false, false, false)"
-      class="side-menu-display"
-      :src="DefaultImg"
-    />
-    <img
-      v-if="is(true, false, false)"
-      class="side-menu-display"
-      :src="AlwaysDisplayedImg"
-    />
-    <img
-      v-if="is(false, true, false)"
-      class="side-menu-display"
-      :src="TopWideImg"
-    />
-    <img
-      v-if="is(false, false, true)"
-      class="side-menu-display"
-      :src="SideMenuWithCategoriesImg"
-    />
-  </p>
+    <p>
+      <img
+        v-if="is(false, false, false)"
+        :src="DefaultImg"
+      />
+      <img
+        v-if="is(true, false, false)"
+        :src="AlwaysDisplayedImg"
+      />
+      <img
+        v-if="is(false, true, false)"
+        class="side-menu-display"
+        :src="TopWideImg"
+      />
+      <img
+        v-if="is(false, false, true)"
+        :src="SideMenuWithCategoriesImg"
+      />
+    </p>
+  </div>
 </template>
 <script setup>
 import { NcButton } from '@nextcloud/vue'
@@ -82,14 +81,3 @@ const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
   return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories
 }
 </script>
-
-<style scoped>
-button {
-  display: inline-block !important;
-  margin: 2px;
-}
-
-img {
-  max-width: 100%;
-}
-</style>
diff --git a/src/components/settings/form/FormOpener.vue b/src/components/settings/form/FormOpener.vue
index a3385f3..d476330 100644
--- a/src/components/settings/form/FormOpener.vue
+++ b/src/components/settings/form/FormOpener.vue
@@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <FormSelect
+    class="cm-settings-form-opener"
     v-model="model"
     :options="options"
   />
diff --git a/src/components/settings/form/FormRange.vue b/src/components/settings/form/FormRange.vue
index b55eba1..f25f128 100644
--- a/src/components/settings/form/FormRange.vue
+++ b/src/components/settings/form/FormRange.vue
@@ -15,8 +15,12 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
-    <em v-if="prepend">{{ t('side_menu', prepend) }}</em>
+  <div class="cm-settings-form-range">
+    <em
+      class="cm-settings-form-range-prepend"
+      v-if="prepend"
+      >{{ t('side_menu', prepend) }}</em
+    >
 
     <input
       v-model="model"
@@ -25,7 +29,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       :max="max"
     />
 
-    <em v-if="append">{{ t('side_menu', append) }}</em>
+    <em
+      v-if="append"
+      class="cm-settings-form-range-append"
+      >{{ t('side_menu', append) }}</em
+    >
   </div>
 </template>
 
@@ -55,18 +63,3 @@ defineProps({
   },
 })
 </script>
-
-<style scoped>
-input {
-  min-height: auto;
-}
-
-div * {
-  vertical-align: middle;
-}
-
-em + input,
-input + em {
-  margin-left: 10px;
-}
-</style>
diff --git a/src/components/settings/form/FormSelect.vue b/src/components/settings/form/FormSelect.vue
index 5dd9db2..b41365c 100644
--- a/src/components/settings/form/FormSelect.vue
+++ b/src/components/settings/form/FormSelect.vue
@@ -15,7 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div>
+  <div class="cm-settings-form-select">
     <template v-if="!expanded">
       <select
         v-if="!expanded"
diff --git a/src/components/settings/form/FormSize.vue b/src/components/settings/form/FormSize.vue
index 57da46e..fd1dfe0 100644
--- a/src/components/settings/form/FormSize.vue
+++ b/src/components/settings/form/FormSize.vue
@@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <FormSelect
+    class="cm-settings-form-size"
     v-model="model"
     :options="options"
   />
diff --git a/src/components/settings/form/FormYesNo.vue b/src/components/settings/form/FormYesNo.vue
index 0ec7f86..75d78b0 100644
--- a/src/components/settings/form/FormYesNo.vue
+++ b/src/components/settings/form/FormYesNo.vue
@@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <NcCheckboxRadioSwitch
+    class="cm-settings-form-yesno"
     v-model="model"
     type="switch"
   />
diff --git a/src/pages/AdminSettings.vue b/src/pages/AdminSettings.vue
index 3bf77c1..dbcf11e 100644
--- a/src/pages/AdminSettings.vue
+++ b/src/pages/AdminSettings.vue
@@ -19,23 +19,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     v-if="config"
     app-name="side_menu"
   >
-    <NcAppContent class="side-menu-setting-app">
-      <div class="side-menu-setting">
-        <NcButton
-          v-for="item in menu"
-          :key="item.label"
-          :variant="item.section === section ? 'primary' : 'secondary'"
-          @click="setSection(item.section)"
-          >{{ trans(item.label) }}</NcButton
-        >
-      </div>
-
-      <TableContainer :class="sectionClass('panel')">
+    <NcAppNavigation class="cm-settings-nav">
+      <NcAppNavigationItem
+        v-for="item in menu"
+        :key="item.label"
+        :name="item.label"
+        :active="item.section === section"
+        @click="setSection(item.section)"
+      >
+      </NcAppNavigationItem>
+    </NcAppNavigation>
+    <NcAppContent class="cm-settings cm-settings--nav">
+      <SettingsSection :class="sectionClass('panel')">
         <SectionTitle label="Panel" />
 
-        <TableRow>
-          <TableLabel label="Display" />
-          <TableValue>
+        <SettingItem>
+          <SettingValue>
             <FormDisplayPicker
               :always-displayed="config['always-displayed']"
               :top-wide-menu="config['big-menu']"
@@ -44,95 +43,95 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               @update:top-wide-menu="(value) => (config['big-menu'] = value)"
               @update:side-menu-with-categories="(value) => (config['side-with-categories'] = value)"
             />
-          </TableValue>
-        </TableRow>
-        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
+          <SettingLabel
             label="Display the logo"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['display-logo']" />
-          </TableValue>
-        </TableRow>
-        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
+          <SettingLabel
             label="Use the avatar instead of the logo"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['use-avatar']" />
-          </TableValue>
-        </TableRow>
-        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
+          <SettingLabel
             label="The logo is a link to the default app"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['add-logo-link']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Show the link to settings"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['show-settings']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Icons"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormSize v-model="config['size-icon']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Texts"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormSize v-model="config['size-text']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
 
-      <TableContainer :class="sectionClass('topMenu')">
+      <SettingsSection :class="sectionClass('topMenu')">
         <SectionTitle label="Top menu" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Applications kept in the top menu"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['top-menu-apps']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Applications kept in the top menu but also shown in side menu"
             help="These applications must be selected in the previous option."
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['top-side-menu-apps']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Hide labels on mouse over"
             :top="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormSelect
               v-model="config['top-menu-mouse-over-hidden-label']"
               :expanded="true"
@@ -142,53 +141,53 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                 { id: 2, label: 'Except the hovered app' },
               ]"
             />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
 
-      <TableContainer :class="sectionClass('apps')">
+      <SettingsSection :class="sectionClass('apps')">
         <SectionTitle label="Applications" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Apps that should not be displayed in the menu"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['big-menu-hidden-apps']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Open apps in new tab"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['target-blank-apps']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Customize sorting"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppSort v-model="config['apps-order']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
 
-      <TableContainer :class="sectionClass('cats')">
+      <SettingsSection :class="sectionClass('cats')">
         <SectionTitle label="Categories" />
 
-        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
-          <TableLabel
+        <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
+          <SettingLabel
             label="Order by"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormSelect
               v-model="config['categories-order-type']"
               :options="[
@@ -196,24 +195,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                 { id: 'custom', label: 'Custom' },
               ]"
             />
-          </TableValue>
-        </TableRow>
-        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
+          <SettingLabel
             label="Customize sorting"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormCatSort v-model="config['categories-order']" />
-          </TableValue>
-        </TableRow>
-        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
+          <SettingLabel
             label="Customize application categories"
             :top="true"
           >
-          </TableLabel>
-          <TableValue>
+          </SettingLabel>
+          <SettingValue>
             <FormAppCategory
               :langs="config['langs']"
               :categories-custom="config['categories-custom']"
@@ -221,39 +220,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               @update:categories-custom="(value) => (config['categories-custom'] = value)"
               @update:apps-categories-custom="(value) => (config['apps-categories-custom'] = value)"
             />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
 
-      <TableContainer :class="sectionClass('opener')">
+      <SettingsSection :class="sectionClass('opener')">
         <SectionTitle label="Opener" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Opener"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormOpener v-model="config['opener']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Dark mode opener"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormOpener v-model="config['dark-mode-opener']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Position"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormSelect
               v-model="config['opener-position']"
               :options="[
@@ -261,38 +260,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                 { id: 'after', label: 'After the logo' },
               ]"
             />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Show only the opener (hidden logo)"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['opener-only']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['opener-hover']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
 
-      <TableContainer :class="sectionClass('colors')">
+      <SettingsSection :class="sectionClass('colors')">
         <SectionTitle label="Colors" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Background color"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['background-color']" />
             <FormColorPicker v-model="config['background-color-to']" />
             <FormRange
@@ -300,45 +299,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               prepend="Transparent"
               append="Opaque"
             />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Background color of current app"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['current-app-background-color']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Text color"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['text-color']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Loader"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['loader-color']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Icon"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormRange
               v-model="config['icon-invert-filter']"
               prepend="Same color"
@@ -349,17 +348,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               prepend="Transparent"
               append="Opaque"
             />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
         <SectionTitle label="Dark mode colors" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Background color"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['dark-mode-background-color']" />
             <FormColorPicker v-model="config['dark-mode-background-color-to']" />
             <FormRange
@@ -367,45 +366,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               prepend="Transparent"
               append="Opaque"
             />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Background color of current app"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['dark-mode-current-app-background-color']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Text color"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['dark-mode-text-color']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Loader"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormColorPicker v-model="config['dark-mode-loader-color']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Icon"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormRange
               v-model="config['dark-mode-icon-invert-filter']"
               prepend="Same color"
@@ -416,60 +415,60 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               prepend="Transparent"
               append="Opaque"
             />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
 
-      <TableContainer :class="sectionClass('global')">
-        <p class="side-menu-tips">
+      <SettingsSection :class="sectionClass('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>
 
         <SectionTitle label="Global" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="The menu is enabled by default for users"
             help="Except when the configuration is forced."
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['default-enabled']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Force this configuration to users"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['force']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Loader enabled"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['loader-enabled']" />
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
 
-      <TableContainer :class="sectionClass('support')">
+      <SettingsSection :class="sectionClass('support')">
         <SectionTitle label="Support" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="You like this app and you want to support me?"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <a
               target="_blank"
               href="https://www.buymeacoffee.com/deblan"
@@ -477,12 +476,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             >
               <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
             </a>
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel label="Need help" />
-          <TableValue class="button-inline">
+        <SettingItem>
+          <SettingLabel label="Need help" />
+          <SettingValue class="button-inline">
             <a
               target="_blank"
               href="https://deblan.gitnet.page/side_menu_doc/"
@@ -497,15 +496,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             >
               <NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton>
             </a>
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="I would like a new feature"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <a
               target="_blank"
               href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml"
@@ -513,15 +512,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             >
               <NcButton variant="secondary">{{ trans('New request') }}</NcButton>
             </a>
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Something went wrong"
             :top="true"
           />
-          <TableValue class="button-inline">
+          <SettingValue class="button-inline">
             <a
               target="_blank"
               href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml"
@@ -564,23 +563,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                 </div>
               </div>
             </NcModal>
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
         <AdminSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
     </NcAppContent>
   </NcContent>
 </template>
 
 <script setup>
-import { NcContent, NcAppContent, NcButton, NcModal } from '@nextcloud/vue'
+import { NcContent, NcAppContent, NcButton, NcModal, NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
 import { ref, onMounted } from 'vue'
 import { useConfigStore } from '../store/config.js'
 
-import TableContainer from '../components/settings/TableContainer'
-import TableRow from '../components/settings/TableRow'
-import TableLabel from '../components/settings/TableLabel'
-import TableValue from '../components/settings/TableValue'
+import SettingsSection from '../components/settings/SettingsSection'
+import SettingItem from '../components/settings/SettingItem'
+import SettingLabel from '../components/settings/SettingLabel'
+import SettingValue from '../components/settings/SettingValue'
 import SectionTitle from '../components/settings/SectionTitle'
 import AdminSaveButton from '../components/settings/AdminSaveButton'
 import FormRange from '../components/settings/form/FormRange'
@@ -596,14 +595,14 @@ import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
 import FormAppCategory from '../components/settings/form/FormAppCategory'
 
 const menu = [
-  { label: 'Global', section: 'global' },
-  { label: 'Panel', section: 'panel' },
-  { label: 'Colors', section: 'colors' },
-  { label: 'Opener', section: 'opener' },
-  { label: 'Applications', section: 'apps' },
-  { label: 'Categories', section: 'cats' },
-  { label: 'Top menu', section: 'topMenu' },
-  { label: 'Support', section: 'support' },
+  { label: 'Global', section: 'global', icon: '' },
+  { label: 'Panel', section: 'panel', icon: '' },
+  { label: 'Colors', section: 'colors', icon: '' },
+  { label: 'Opener', section: 'opener', icon: '' },
+  { label: 'Applications', section: 'apps', icon: '' },
+  { label: 'Categories', section: 'cats', icon: '' },
+  { label: 'Top menu', section: 'topMenu', icon: '' },
+  { label: 'Support', section: 'support', icon: '' },
 ]
 
 const config = ref(null)
diff --git a/src/pages/UserSettings.vue b/src/pages/UserSettings.vue
index 2130380..f0f06ed 100644
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -21,55 +21,55 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   >
     <NcAppContent
       v-if="config['force']"
-      class="side-menu-setting-app"
+      class="cm-settings"
     >
-      <TableContainer>
-        <TableLabel label="You do not have permission to change the settings." />
-      </TableContainer>
+      <SettingsSection>
+        <SettingLabel label="You do not have permission to change the settings." />
+      </SettingsSection>
     </NcAppContent>
     <NcAppContent
       v-else
-      class="side-menu-setting-app side-menu-setting-app--user"
+      class="cm-settings"
     >
-      <TableContainer>
+      <SettingsSection>
         <SectionTitle label="Menu" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="Enable the custom menu"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormYesNo v-model="config['enabled']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Applications kept in the top menu"
             help="If there is no selection then the global configuration is applied."
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['top-menu-apps']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Applications kept in the top menu but also shown in side menu"
             help="These applications must be selected in the previous option."
             help2="If there is no selection then the global configuration is applied"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppPicker v-model="config['top-side-menu-apps']" />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Open apps in new tab"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormSelect
               v-model="config['target-blank-mode']"
               :options="[
@@ -81,28 +81,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               v-if="config['target-blank-mode'] === 2"
               v-model="config['target-blank-apps']"
             />
-          </TableValue>
-        </TableRow>
-        <TableRow>
-          <TableLabel
+          </SettingValue>
+        </SettingItem>
+        <SettingItem>
+          <SettingLabel
             label="Customize sorting"
             :top="true"
           />
-          <TableValue>
+          <SettingValue>
             <FormAppSort v-model="config['apps-order']" />
-          </TableValue>
-        </TableRow>
-      </TableContainer>
+          </SettingValue>
+        </SettingItem>
+      </SettingsSection>
 
-      <TableContainer>
+      <SettingsSection>
         <SectionTitle label="Support" />
 
-        <TableRow>
-          <TableLabel
+        <SettingItem>
+          <SettingLabel
             label="You like this app and you want to support me?"
             :middle="true"
           />
-          <TableValue>
+          <SettingValue>
             <a
               target="_blank"
               href="https://www.buymeacoffee.com/deblan"
@@ -110,11 +110,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             >
               <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
             </a>
-          </TableValue>
-        </TableRow>
+          </SettingValue>
+        </SettingItem>
 
         <UserSaveButton :config="config" />
-      </TableContainer>
+      </SettingsSection>
     </NcAppContent>
   </NcContent>
 </template>
@@ -124,10 +124,10 @@ import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
 import { ref, onMounted } from 'vue'
 import { useConfigStore } from '../store/config.js'
 
-import TableContainer from '../components/settings/TableContainer'
-import TableRow from '../components/settings/TableRow'
-import TableLabel from '../components/settings/TableLabel'
-import TableValue from '../components/settings/TableValue'
+import SettingsSection from '../components/settings/SettingsSection'
+import SettingItem from '../components/settings/SettingItem'
+import SettingLabel from '../components/settings/SettingLabel'
+import SettingValue from '../components/settings/SettingValue'
 import SectionTitle from '../components/settings/SectionTitle'
 import UserSaveButton from '../components/settings/UserSaveButton'
 import FormYesNo from '../components/settings/form/FormYesNo'
diff --git a/src/scss/admin.scss b/src/scss/admin.scss
index 8a050d7..c5e3686 100644
--- a/src/scss/admin.scss
+++ b/src/scss/admin.scss
@@ -15,144 +15,209 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-#side-menu-section input[type='color'] {
-  width: 100px;
-  margin: 10px 0 10px 0;
-  padding: 0;
-  border-radius: 0;
-}
-
-#-dropside-menu-section input[type='checkbox'] {
-  vertical-align: middle;
-}
-
-#side-menu-section input[type='range'] {
-  vertical-align: middle;
-}
-
-#side-menu-section select {
-  margin: 10px 0 10px 0;
-}
-
-.keyboard-key {
-  padding: 1px 9px;
-  margin: 0 2px;
-  background: #eee;
-  border: 1px solid #aaa;
-  color: #555;
-  border-radius: 3px;
-}
-
-.side-menu-display {
-  padding: 10px;
-  border: 2px solid transparent;
-  max-width: 100%;
-  cursor: pointer;
-}
-
-.side-menu-display.is-active {
-  border: 2px solid #91cb7f;
-}
-
-.info {
-  margin-top: 8px;
-  padding: 5px;
-  background: #91cb7f;
-  color: #fff;
-  border-radius: var(--border-radius);
-}
-
-#side-menu-section h2 small {
-  font-size: 11px;
-  font-weight: normal;
-}
-
-.side-menu-toggler {
-  cursor: pointer;
-}
-
-.side-menu-setting-list {
-  margin: 10px 4px 4px 0px;
-  border: 2px solid var(--color-border-dark);
-  border-radius: 15px;
-}
-
-.side-menu-setting-list-item {
-  padding: 5px 10px;
-  border-bottom: 1px solid var(--color-border-dark);
-  max-width: 300px;
-  margin: -1px 0 0 0;
-  cursor: pointer;
-  line-height: 32px;
-}
-
-.side-menu-setting-list-item:last-child {
-  border-bottom: 0;
-}
-
-.side-menu-setting-list-drop {
-  background: yellow;
-  border-color: yellow;
-  height: 34px;
-}
-
-.side-menu-setting.arrow {
-  color: #ccc;
-  padding-right: 5px;
-}
-
-.side-menu-setting-list-item input {
-  margin-top: 0;
-  height: 21px !important;
-  min-height: auto !important;
-}
-
-#apps-categories-custom-list select {
-  width: 100%;
-}
-
-.side-menu-setting-table {
-  display: table;
-  width: 100%;
+.cm-settings {
   padding: 20px;
-}
 
-.side-menu-setting-row {
-  display: table;
-  margin-bottom: 10px;
-
-  &--disabled {
-    opacity: 0.5;
+  &--nav {
+    padding-top: 50px;
   }
-}
 
-.side-menu-setting-label {
-  display: table-cell;
-  width: 430px;
-  max-width: 30vw;
-  padding-right: 20px;
-}
+  &-nav {
+    .app-navigation__content {
+      padding: 20px;
+    }
 
-.side-menu-setting-label--top {
-  vertical-align: top;
-}
+    .app-navigation-entry-icon {
+      display: none !important;
+    }
 
-.side-menu-setting-label--middle {
-  vertical-align: middle;
-}
+    .app-navigation-entry__name {
+      padding-left: 10px !important;
+    }
+  }
 
-.side-menu-setting-form {
-  display: table-cell;
-  min-width: 300px;
-  max-width: 40vw;
-}
+  &-tips {
+    margin-bottom: 15px;
+  }
 
-.side-menu-setting-label-short {
-  width: 300px;
-}
+  &-section {
+    width: 100%;
+    padding: 20px;
+  }
 
-.side-menu-setting-form-long {
-  width: 400px;
+  &-item {
+    display: flex;
+    justify-content: start;
+    margin-bottom: 10px;
+
+    &--disabled {
+      opacity: 0.5;
+    }
+
+    &-label {
+      max-width: 350px;
+      width: 100%;
+      padding-right: 20px;
+
+      &--short {
+        max-width: 300px;
+      }
+
+      &--top {
+        vertical-align: top;
+      }
+
+      &--middle {
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+      }
+    }
+
+    &-form {
+    }
+  }
+
+  &-form {
+    &-arrow {
+      color: var(--color-text-maxcontrast);
+      display: inline-block;
+      margin-right: 3px;
+    }
+
+    &-draggable {
+      cursor: pointer;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    &-displaypicker {
+      button {
+        display: inline-block !important;
+        margin: 2px;
+      }
+
+      img {
+        padding: 10px 10px 10px 0;
+        border: 2px solid transparent;
+        max-width: 100%;
+        cursor: pointer;
+      }
+    }
+
+    &-colorpicker {
+      display: inline-block;
+      margin-right: 12px;
+      width: 60px;
+      height: 30px;
+
+      &-value {
+        cursor: pointer;
+        width: 60px;
+        height: 30px;
+        border-radius: 6px;
+      }
+    }
+
+    &-range {
+      input {
+        min-height: auto;
+      }
+
+      div * {
+        vertical-align: middle;
+      }
+
+      em + input,
+      input + em {
+        margin-left: 10px;
+      }
+    }
+
+    &-catsort-modal {
+      .modal__footer {
+        padding: 20px;
+        text-align: right;
+      }
+
+      .modal__footer button {
+        display: inline-block;
+      }
+    }
+
+    &-appsort-modal {
+      .modal__footer {
+        text-align: right;
+        padding: 20px;
+      }
+
+      .modal__footer button {
+        display: inline-block;
+      }
+    }
+
+    &-apppicker-modal {
+      .modal__content {
+        padding: 20px;
+      }
+
+      .modal__footer {
+        margin-top: 20px;
+        text-align: right;
+      }
+
+      .modal__footer button {
+        display: inline-block;
+      }
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    &-appcategory-modal {
+      .modal__content {
+        padding: 20px;
+      }
+
+      .menu button {
+        display: inline-block;
+        margin-right: 5px;
+      }
+
+      .modal__footer {
+        margin-top: 20px;
+        text-align: right;
+      }
+
+      .modal__footer button {
+        display: inline-block;
+      }
+
+      td {
+        padding: 5px 0;
+      }
+
+      tr:hover,
+      td:hover {
+        background: none !important;
+      }
+
+      .form {
+        padding: 10px 0;
+      }
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+
+      .btn-close {
+        margin-left: 20px;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1024px) {
@@ -169,104 +234,6 @@
   }
 }
 
-#side-menu-save-progress {
-  display: inline-block;
-  width: 0;
-  height: 15px;
-  background: #fff;
-}
-
-.btn-reset {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  top: -8px;
-  left: 5px;
-  transition-duration: 0.8s;
-  transition-property: transform;
-  transform: rotate(360deg);
-}
-
-.btn-reset--down {
-  top: 2px;
-}
-
-.btn-reset--progress {
-  transform: rotate(-359deg);
-}
-
-.badges {
-  margin-bottom: 14px;
-  margin-top: 4px;
-}
-
-.badge {
-  border-width: 1px;
-  padding: 2px 8px;
-  margin-right: 2px;
-  margin-bottom: 5px;
-  display: inline-block;
-  border-radius: 4px;
-  font-size: 13px;
-}
-
-.badge-1 {
-  background: #d4ce14;
-  border-color: #cad413;
-  color: #373a05;
-}
-
-.badge-2 {
-  background: #96d47f;
-  border-color: #7ed49b;
-  color: #333;
-}
-
-.badge-3 {
-  background: #d4540a;
-  border-color: #d4700c;
-  color: #fff;
-}
-
-.badge-4 {
-  background: #9d81d4;
-  border-color: #c681d4;
-  color: #fff;
-}
-
-.side-menu-setting-color-picker {
-  display: inline-block;
-  margin-right: 12px;
-  width: 60px;
-  height: 30px;
-
-  &-value {
-    cursor: pointer;
-    width: 60px;
-    height: 30px;
-    border-radius: 6px;
-  }
-}
-
-.side-menu-setting-app {
-  display: flex;
-
-  &--user {
-    display: block;
-  }
-}
-
-.side-menu-setting {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
 .side-menu-setting-save {
   margin-top: 30px;
 }
-
-.side-menu-tips {
-  margin-bottom: 15px;
-}