bugfix(TAT-123): fix img parameters and component names

src/App.vue

@@ -1,15 +1,15 @@
 <template>
-  <Navigation />
+  <navigation-menu />
   <router-view id="page-body"></router-view>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Navigation from "@/components/Navigation.vue";
+import NavigationMenu from "@/components/NavigationMenu.vue";
 
 export default defineComponent({
   components: {
-    Navigation,
+    NavigationMenu
   },
 });
 </script>

src/components/Home.vue → src/components/HomePage.vue

@@ -18,16 +18,16 @@
         <div class="mx-auto my-16 grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-8">
           <section-item title="Calculator"
             description="Use the criteria to score your system and click generate in order to see your personalized list of techniques. Our calculator will show you a customized list of the vulnerabilities you have and what you need to prioritize for your system."
-            imgSrc="calculator.svg" link="calculator" />
+            :imgSrc="CalculatorSvg" link="calculator" />
           <section-item title="Top 10 lists"
             description="The Top Ransomware Technique List provides a starting point for defending against ransomware attacks and demonstrates how the Top ATT&CK Techniques methodology can be tailored to different use cases."
-            imgSrc="list.svg" link="top-10-lists" />
+            :imgSrc="ListSvg" link="top-10-lists" />
           <section-item title="Methodology"
             description="Use the criteria to score your system and click generate in order to see your personalized list of techniques. Our calculator will show you a customized list of the vulnerabilities you have and what you need to prioritize for your system."
-            imgSrc="book.svg" link="methodology" />
+            :imgSrc="BookSvg" link="methodology" />
           <section-item title="Help"
             description="The Top Ransomware Technique List provides a starting point for defending against ransomware attacks and demonstrates how the Top ATT&CK Techniques methodology can be tailored to different use cases."
-            imgSrc="help.svg" link="help" />
+            :imgSrc="HelpSvg" link="help" />
         </div>
       </div>
     </div>
@@ -73,12 +73,20 @@
 import { defineComponent } from "vue";
 import { useExampleStore } from "../stores/example.store";
 import SectionItem from "./SectionItem.vue";
+import CalculatorSvg from "@/assets/calculator.svg";
+import ListSvg from "@/assets/list.svg";
+import BookSvg from "@/assets/book.svg";
+import HelpSvg from "@/assets/help.svg";
 
 export default defineComponent({
   components: { SectionItem },
   data() {
     return {
       exampleStore: useExampleStore(),
+      CalculatorSvg,
+      ListSvg,
+      BookSvg,
+      HelpSvg,
     };
   },
 });

src/components/Navigation.vue → src/components/NavigationMenu.vue

@@ -53,7 +53,7 @@ export default defineComponent({
   },
   methods: {
     getActiveIndex() {
-      let route = this.$route.path;
+      const route = this.$route.path;
       return this.items.findIndex(function (item) {
         return item.route === route;
       });

src/components/SectionItem.vue

@@ -1,29 +1,23 @@
 <template>
   <div class="mx-4">
-    <router-link
-      :to="link"
-      routerLinkActive="router-link-active"
-      class="py-2 -ml-2 flex"
-    >
-      <img v-bind:src="getImgUrl()" class="h-11" />
+    <router-link :to="link" routerLinkActive="router-link-active" class="py-2 -ml-2 flex">
+      <img v-bind:src="this.imgSrc" class="h-11" />
       <h2 class="text-2xl uppercase font-medium my-auto ml-2 mr-auto">
         {{ title }}
       </h2>
     </router-link>
     <p>{{ description }}</p>
-    <router-link
-      :to="link"
-      routerLinkActive="router-link-active"
-      class="flex border-b-2 border-ctid-light-purple uppercase w-max mt-6"
-    >
+    <router-link :to="link" routerLinkActive="router-link-active"
+      class="flex border-b-2 border-ctid-light-purple uppercase w-max mt-6">
       <p class="link font-semibold">Learn More</p>
-      <img src="../assets/arrow-right.svg" class="h-6 ml-8" />
+      <img :src="ArrowRight" class="h-6 ml-8" />
     </router-link>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import ArrowRight from "@/assets/arrow-right.svg"
 
 export default defineComponent({
   props: {
@@ -33,12 +27,11 @@ export default defineComponent({
     link: String,
   },
   data() {
-    return {};
+    return {
+      ArrowRight
+    };
   },
   methods: {
-    getImgUrl() {
-      return "/src/assets/" + this.imgSrc;
-    },
   },
 });
 </script>

src/router/index.ts

@@ -1,30 +1,30 @@
 import { createRouter, createWebHistory } from "vue-router";
-import Home from "@/components/Home.vue";
-import Methodology from "@/components/Methodology.vue";
-import Help from "@/components/Help.vue";
-import Calculator from "@/components/Calculator.vue";
+import HomePage from "@/components/HomePage.vue";
+import MethodologyPage from "@/components/MethodologyPage.vue";
 import TopTen from "@/components/TopTen.vue";
+import HelpPage from "@/components/HelpPage.vue";
+import CalculatorPage from "@/components/CalculatorPage.vue";
 
 const routes = [
   {
     path: "/",
     name: "home",
-    component: Home,
+    component: HomePage,
   },
   {
     path: "/methodology",
     name: "methodology",
-    component: Methodology,
+    component: MethodologyPage,
   },
   {
     path: "/help",
     name: "help",
-    component: Help,
+    component: HelpPage,
   },
   {
     path: "/calculator",
     name: "calculator",
-    component: Calculator,
+    component: CalculatorPage,
   },
   {
     path: "/top-10-lists",