Upgraded all components to vue 3 & typescript

src/components/header/NavigationIcon.vue

@@ -1,8 +1,8 @@
 <template>
   <router-link
-    :to="{ path: route.route }"
-    :key="route.title"
-    v-if="route.requiresAuth == undefined || (route.requiresAuth && loggedIn)"
+    :to="{ path: route?.route }"
+    :key="route?.title"
+    v-if="route?.requiresAuth == undefined || (route?.requiresAuth && loggedIn)"
   >
     <li class="navigation-link" :class="{ active: route.route == active }">
       <component class="navigation-icon" :is="route.icon"></component>
@@ -11,71 +11,66 @@
   </router-link>
 </template>
 
-<script>
-import { mapGetters, mapActions } from "vuex";
+<script setup lang="ts">
+  import { useStore } from "vuex";
+  import { computed, defineProps } from "vue";
+  import type INavigationIcon from "../../interfaces/INavigationIcon";
 
-export default {
-  name: "NavigationIcon",
-  props: {
-    active: {
-      type: String,
-      required: false
-    },
-    route: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    ...mapGetters("user", ["loggedIn"])
+  interface Props {
+    route: INavigationIcon;
+    active?: string;
   }
-};
+
+  defineProps<Props>();
+
+  const store = useStore();
+  const loggedIn = computed(() => store.getters["user/loggedIn"]);
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.navigation-link {
-  display: grid;
-  place-items: center;
-  min-height: var(--header-size);
-  list-style: none;
-  padding: 1rem 0.15rem;
-  text-align: center;
-  background-color: var(--background-color-secondary);
-  transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
-    fill 0.3s ease, background-color 0.5s ease;
+  .navigation-link {
+    display: grid;
+    place-items: center;
+    min-height: var(--header-size);
+    list-style: none;
+    padding: 1rem 0.15rem;
+    text-align: center;
+    background-color: var(--background-color-secondary);
+    transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
+      fill 0.3s ease, background-color 0.5s ease;
 
-  &:hover {
-    transform: scale(1.05);
-  }
+    &:hover {
+      transform: scale(1.05);
+    }
 
-  &:hover,
-  &.active {
-    background-color: var(--background-color);
+    &:hover,
+    &.active {
+      background-color: var(--background-color);
 
-    span,
-    .navigation-icon {
-      color: var(--text-color);
-      fill: var(--text-color);
+      span,
+      .navigation-icon {
+        color: var(--text-color);
+        fill: var(--text-color);
+      }
+    }
+
+    span {
+      text-transform: uppercase;
+      font-size: 11px;
+      margin-top: 0.25rem;
+      color: var(--text-color-70);
     }
   }
 
-  span {
-    text-transform: uppercase;
-    font-size: 11px;
-    margin-top: 0.25rem;
-    color: var(--text-color-70);
+  a {
+    text-decoration: none;
   }
-}
 
-a {
-  text-decoration: none;
-}
-
-.navigation-icon {
-  width: 28px;
-  fill: var(--text-color-70);
-  transition: inherit;
-}
+  .navigation-icon {
+    width: 28px;
+    fill: var(--text-color-70);
+    transition: inherit;
+  }
 </style>