feat(settings): go to the settings route if the settings sub-route does not exist

src/features/footer/components/Footer.vue

@@ -35,7 +35,7 @@ const copyrightPeriod =
 <template>
     <footer class="global-footer">
         <div class="footer-segment">
-            <RouterLink to="settings" class="link">
+            <RouterLink to="/settings" class="link">
                 {{ t('preferences.settings') }}
             </RouterLink>
             <LanguageSwitchButton />

src/features/settings/views/SettingsView.vue

@@ -17,9 +17,33 @@ limitations under the License.
 <script setup>
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 
+import { loadSettingsConfig } from '../utils/settingsParser';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
 
 const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const settingsLoaded = ref(false)
+const settings = ref([]);
+
+onMounted(async () => {
+    settings.value = (await loadSettingsConfig()).contents;
+    if (!settings.value.map((section) => section.name).includes(getActiveSection())) {
+        router.push('/settings');
+    };
+    settingsLoaded.value = true;
+});
+
+const getActiveSection = function getActiveSection () {
+    const segments = route.path
+        .split('/')
+        .filter(Boolean);
+
+    return segments[1];
+};
 </script>
 
 <template>
@@ -31,7 +55,23 @@ const { t } = useI18n();
         </header>
         <LeftSidebarLayout class="layout">
             <template #sidebar>
+                <ul class="sidebar-sections-list">
+                    <li v-for="section in settings">
+                        <RouterLink
+                            :to="`/settings/${section.name}`"
+                            class="button button-link link sidebar-section"
+                            :class="{ active: getActiveSection() === section.name }"
+                        >
+                            {{ t(section.i18n) }}
+                        </RouterLink>
+                    </li>
+                </ul>
             </template>
+            <div>
+                <div v-if="!settingsLoaded">
+                    {{ t('loading') }}
+                </div>
+            </div>
         </LeftSidebarLayout>
     </div>
 </template>
@@ -46,6 +86,10 @@ const { t } = useI18n();
     flex-direction: column;
 }
 
+.active {
+    background-color: var(--light-hover);
+}
+
 .header {
     padding: var(--main-content-padding-y) var(--main-content-padding-x);
 }
@@ -53,4 +97,21 @@ const { t } = useI18n();
 .header h1 {
     margin: 0;
 }
+
+.sidebar-sections-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar-section {
+    --padding: 0.8em;
+    border-radius: var(--padding);
+    padding: var(--padding);
+    margin-bottom: 4px;
+    width: calc(100% - 2 * var(--padding));
+    text-align: start;
+    font-size: 1rem;
+    display: block;
+}
 </style>

src/locales/de.json

@@ -1,4 +1,5 @@
 {
+    "loading": "Laden ...",
     "search": {
         "searchBar": {
             "submit": "Suchen",

src/locales/en.json

@@ -1,4 +1,5 @@
 {
+    "loading": "Loading ...",
     "search": {
         "searchBar": {
             "submit": "Search",

src/locales/es.json

@@ -1,4 +1,5 @@
 {
+    "loading": "Cargando ...",
     "search": {
         "searchBar": {
             "submit": "Buscar",

src/locales/fr.json

@@ -1,4 +1,5 @@
 {
+    "loading": "Chargement ...",
     "search": {
         "searchBar": {
             "submit": "Rechercher",

src/locales/it.json

@@ -1,4 +1,5 @@
 {
+    "loading": "Caricamento ...",
     "search": {
         "searchBar": {
             "submit": "Cerca",

src/locales/pt.json

@@ -1,4 +1,5 @@
 {
+    "loading": "A carregar ...",
     "search": {
         "searchBar": {
             "submit": "Pesquisar",

src/main.js

@@ -16,18 +16,15 @@ limitations under the License.
 
 import { createApp } from 'vue'
 import App from './App.vue'
-import { i18n, loadLanguage } from './i18n'
+import { i18n, loadLanguage } from './i18n';
-import getCurrentLanguage from './utils/currentLanguage'
+import getCurrentLanguage from './utils/currentLanguage';
 import router from './router'
-
 import './styles/common.css'
 import './styles/variables/colors.css'
 
-(async () => {
+await loadLanguage(getCurrentLanguage());
-  await loadLanguage(getCurrentLanguage())
 
-  createApp(App)
+createApp(App)
     .use(router)
     .use(i18n)
-    .mount('#app')
+    .mount('#app')
-})()

src/router/index.js

@@ -43,6 +43,12 @@ const routes = [
         path: '/settings',
         name: 'settings',
         component: SettingsView,
+        children: [
+            {
+                path: ':rest(.*)',
+                component: SettingsView
+            }
+        ],
         meta: {
             title: () => i18n.global.t('preferences.settings')
         }
@@ -59,6 +65,18 @@ const router = createRouter({
     routes
 });
 
+// remove trailing slash(es)
+router.beforeEach((route) => {
+    if (route.path !== '/' && route.path.endsWith('/')) {
+        return {
+            path: route.path.replace(/\/+$/, ''),
+            query: route.query,
+            hash: route.hash,
+            replace: true
+        };
+    };
+});
+
 // set page title
 router.afterEach(to => {
     const title =

src/styles/common.css

@@ -23,10 +23,23 @@ body {
     text-decoration: none;
 }
 
-.link:hover:not(.button-link) {
+.link:hover:not(.button-link), .link:focus:not(.button-link) {
+    outline: none;
     text-decoration: underline;
 }
 
+.button-link {
+    color: var(--dark);
+}
+
+.button-link:hover {
+    color: var(--dark);
+}
+
+.button-link:visited {
+    color: var(--dark);
+}
+
 input {
     color: var(--dark);
 }
@@ -34,4 +47,18 @@ input {
 .main-content-padding {
     padding: var(--main-content-padding);
     width: calc(100% - var(--main-content-padding-x) * 2);
+}
+
+.button {
+    background-color: var(--light-bg);
+    border: none;
+}
+
+.button:focus {
+    background-color: var(--light-hover);
+    outline: none;
+}
+
+.button:hover {
+    background-color: var(--light-hover);
 }