chore(front): refactor admin settings

front/src/views/admin/Settings.vue

@@ -11,6 +11,16 @@ import { useRoute } from 'vue-router'
 
 import SettingsGroup from '~/components/admin/SettingsGroup.vue'
 
+import Layout from '~/components/ui/Layout.vue'
+import Toc from '~/components/ui/Toc.vue'
+import Section from '~/components/ui/Section.vue'
+import Header from '~/components/ui/Header.vue'
+import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Pills from '~/components/ui/Pills.vue'
+import Loader from '~/components/ui/Loader.vue'
+
 import useErrorHandler from '~/composables/useErrorHandler'
 
 const current = ref()
@@ -182,42 +192,26 @@ await nextTick()
 </script>
 
 <template>
-  <main
-    v-title="labels.settings"
-    class="main"
+  <Layout
+    main
+    stack
+    :class="['ui', {'loading': isLoading}]"
   >
-    <div class="ui vertical stripe segment">
-      <div class="ui text container">
-        <div :class="['ui', {'loading': isLoading}, 'form']" />
-        <div
-          v-if="settingsData"
-          id="settings-grid"
-          class="ui grid"
-        >
-          <div class="twelve wide stretched column">
-            <settings-group
-              v-for="group in groups"
-              :key="group.id"
-              :settings-data="settingsData"
-              :group="group"
-            />
-          </div>
-          <div class="four wide column">
-            <div class="ui sticky vertical secondary menu">
-              <div class="header item">
-                {{ t('views.admin.Settings.header.sections') }}
-              </div>
-              <a
-                v-for="(group, key) in groups"
-                :key="key"
-                :class="['menu', {active: group.id === current}, 'item']"
-                :href="'#' + group.id"
-                @click.prevent="scrollTo(group.id)"
-              >{{ group.label }}</a>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div
+      v-if="settingsData"
+      id="settings-grid"
+      class="ui grid"
+    >
+      <Toc
+        heading="h2"
+      >
+        <settings-group
+          v-for="group in groups"
+          :key="group.id"
+          :settings-data="settingsData"
+          :group="group"
+        />
+      </Toc>
     </div>
-  </main>
+  </Layout>
 </template>