Fix: Fix page transition & improve active handling

Fix: Fix current route parsing

src/pages/Settings.vue

@@ -1,5 +1,4 @@
 <template>
-    <transition name="slide-fade" appear>
     <div>
         <h1 v-show="show" class="mb-3">
             {{ $t("Settings") }}
@@ -11,36 +10,36 @@
                     <router-link
                         v-for="(item, key) in subMenus"
                         :key="key"
-                            :to="`/settings/${item.path}`"
+                        :to="`/settings/${key}`"
-                        >
-                            <div
-                                class="menu-item"
-                                :class="{ active: $route.name == `settings-${key}` }"
                     >
+                        <div class="menu-item">
                             {{ item.title }}
                         </div>
                     </router-link>
                 </div>
                 <div class="settings-content">
                     <div class="settings-content-header">
-                            {{ subMenus[$route.name.split("-")[1]].title }}
+                        {{ subMenus[currentPage].title }}
                     </div>
                     <div class="mx-3">
-                            <router-view />
+                        <router-view v-slot="{ Component }">
-                        </div>
+                            <transition name="slide-fade" appear>
-                    </div>
+                                <component :is="Component" />
-                </div>
-            </div>
-        </div>
                             </transition>
+                        </router-view>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-export default {
+import { useRoute } from "vue-router";
 
+export default {
     data() {
         return {
-
             show: true,
 
             settings: {},
@@ -49,36 +48,39 @@ export default {
             subMenus: {
                 general: {
                     title: this.$t("General"),
-                    path: "general",
                 },
                 appearance: {
                     title: this.$t("Appearance"),
-                    path: "appearance",
                 },
                 notifications: {
                     title: this.$t("Notifications"),
-                    path: "notifications",
                 },
-                monitorHistory: {
+                "monitor-history": {
                     title: this.$t("Monitor History"),
-                    path: "monitor-history",
                 },
                 security: {
                     title: this.$t("Security"),
-                    path: "security",
                 },
                 backup: {
                     title: this.$t("Backup"),
-                    path: "backup",
                 },
                 about: {
                     title: this.$t("About"),
-                    path: "about",
+                },
-                }
             },
         };
     },
 
+    computed: {
+        currentPage() {
+            let pathEnd = useRoute().path.split("/").at(-1);
+            if (pathEnd == "settings" || pathEnd == null) {
+                return "general";
+            }
+            return pathEnd;
+        },
+    },
+
     mounted() {
         this.loadSettings();
     },
@@ -120,7 +122,6 @@ export default {
 .shadow-box {
     padding: 20px;
     min-height: calc(100vh - 155px);
-    max-height: calc(100vh - 30px);
 }
 
 footer {
@@ -154,7 +155,7 @@ footer {
         }
     }
 
-    .menu-item.active {
+    .active .menu-item {
         background: $highlight-white;
         border-left: 4px solid $primary;
         border-top-left-radius: 0;

src/router.js

@@ -71,37 +71,30 @@ const routes = [
                             {
                                 path: "general",
                                 alias: "",
-                                name: "settings-general",
                                 component: General,
                             },
                             {
                                 path: "appearance",
-                                name: "settings-appearance",
                                 component: Appearance,
                             },
                             {
                                 path: "notifications",
-                                name: "settings-notifications",
                                 component: Notifications,
                             },
                             {
                                 path: "monitor-history",
-                                name: "settings-monitorHistory",
                                 component: MonitorHistory,
                             },
                             {
                                 path: "security",
-                                name: "settings-security",
                                 component: Security,
                             },
                             {
                                 path: "backup",
-                                name: "settings-backup",
                                 component: Backup,
                             },
                             {
                                 path: "about",
-                                name: "settings-about",
                                 component: About,
                             },
                         ]