feat(settings): implement settings pages navigation

src/features/settings/components/SettingsPage.vue

@@ -20,7 +20,6 @@ import SettingsInput from './SettingsInput.vue';
 import Selection from './Selection.vue';
 
 import { useI18n } from 'vue-i18n';
-import { getSectionHeadingLevel } from '../utils/getSectionHeadingLevel.js';
 
 const { t } = useI18n();
 
@@ -36,9 +35,9 @@ const props = defineProps({
 
 <template>
     <div>
-        <div role="heading" :aria-level="getSectionHeadingLevel(props.path)" class="section-heading">
+        <h2 class="section-heading">
             {{ t(props.setting.i18n) }}
-        </div>
+        </h2>
         <div
             v-for="setting in props.setting.content"
             class="setting"

src/features/settings/views/SettingsView.vue

@@ -18,6 +18,7 @@ limitations under the License.
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 import SettingsPage from '../components/SettingsPage.vue';
 
+import { getSettingRecursively } from '../utils/getSetting.js';
 import { loadSettingsConfig } from '../utils/settingsParser';
 import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -37,12 +38,17 @@ watchEffect(() => {
         .split('/')
         .filter(Boolean);
 
-    activeSection.value = segments[1];
+    activeSection.value = segments.slice(1, segments.length).join('.');
 });
 
 const updateSettings = function updateSettings () {
     if (activeSection.value) {
-        activeSectionContent.value = settings.value.filter((section) => section.name === activeSection.value)[0];
+        const setting = getSettingRecursively(activeSection.value, settings.value);
+        if (!setting.content) {
+            router.push('/settings');
+        } else {
+            activeSectionContent.value = setting;
+        };
     } else {
         activeSectionContent.value = { content: [] };
     };
@@ -50,9 +56,6 @@ const updateSettings = function updateSettings () {
 
 onMounted(async () => {
     settings.value = (await loadSettingsConfig()).contents;
-    if (!settings.value.map((section) => section.name).includes(activeSection.value)) {
-        router.push('/settings');
-    };
     watchEffect(() => {
         updateSettings();
     });