Moved the navbar into self contained component

src/components/HeaderNavBar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+</script>
+
+<template>
+  <v-app-bar fixed app>
+    <v-container class="d-flex align-center pa-0">
+      <div class="d-flex align-center">
+        <RouterLink class="mx-2 text-decoration-none" to="/" data-role="homeNavigation" v-slot="{ isActive }">
+          <v-btn
+            :variant="isActive ? 'elevated' : 'outlined'"
+            color="primary"
+            size="large"
+            prepend-icon="mdi-home-outline"
+          >
+            Home
+          </v-btn>
+        </RouterLink>
+        <RouterLink class="mx-2 text-decoration-none" to="/about" data-role="aboutNavigation" v-slot="{ isActive }">
+          <v-btn
+            :variant="isActive ? 'elevated' : 'outlined'"
+            color="primary"
+            size="large"
+            prepend-icon="mdi-chat-question-outline"
+          >
+            About
+          </v-btn>
+        </RouterLink>
+      </div>
+    </v-container>
+  </v-app-bar>
+</template>