Setting page (#5)

* Switched to eslint.config.ts and demoted @typescript-eslint/no-unused-vars to warning

* Created /settings route, associated component and modified tests for routes

* Added tests for SettingsView.vue

* Added jiti library needed for linting

* Refactored routes' tests.

* Refactoring to reduce code duplication

src/components/HeaderNavBar.vue

@@ -7,12 +7,7 @@ import { RouterLink } from "vue-router";
     <v-container class="d-flex align-center pa-0">
       <div class="d-flex align-center">
         <RouterLink v-slot="{ isActive }" class="mx-2 text-decoration-none" to="/" data-role="homeNavigation">
-          <v-btn
-            :variant="isActive ? 'elevated' : 'outlined'"
-            color="primary"
-            size="large"
-            prepend-icon="mdi-home-outline"
-          >
+          <v-btn :variant="isActive ? 'elevated' : 'outlined'" color="primary" size="large" prepend-icon="mdi-home-outline">
             Home
           </v-btn>
         </RouterLink>
@@ -26,7 +21,12 @@ import { RouterLink } from "vue-router";
             About
           </v-btn>
         </RouterLink>
+        <RouterLink v-slot="{ isActive }" class="mx-2 text-decoration-none" to="/settings" data-role="settingsNavigation">
+          <v-btn :variant="isActive ? 'elevated' : 'outlined'" color="primary" size="large" prepend-icon="mdi-cog-outline">
+            Settings
+          </v-btn>
+        </RouterLink>
       </div>
     </v-container>
   </v-app-bar>
-</template>
+</template>

src/router/index.ts

@@ -14,6 +14,11 @@ const router = createRouter({
       name: "about",
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: "/settings",
+      name: "settings",
+      component: () => import("~/views/SettingView.vue"),
+    },
   ],
 });
 

src/views/SettingView.vue

@@ -0,0 +1,5 @@
+<template>
+  <article>
+    <h1 class="text-h2 text-primary"><i class="mdi mdi-cog-outline"></i>Settings</h1>
+  </article>
+</template>