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
+  <Layout
-    v-title="labels.settings"
+    main
-    class="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">
+      <Toc
+        heading="h2"
+      >
         <settings-group
           v-for="group in groups"
           :key="group.id"
           :settings-data="settingsData"
           :group="group"
         />
+      </Toc>
     </div>
-          <div class="four wide column">
+  </Layout>
-            <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>
-  </main>
 </template>