added nav and footer

src/components/MainFooter.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-footer color="secondary" height="100" class="d-flex justify-center">
+    <v-sheet color="transparent" class="footer bg-secondary text-center pt-4 pb-2">
+      <v-sheet color="transparent" class="text">
+        <p>
+          Made with
+          <v-hover>
+            <template v-slot:default="{ isHovering, props }">
+              <v-icon v-bind="props" icon="mdi-heart" :color="isHovering ? 'red' : 'primary'" />
+            </template>
+          </v-hover>
+          ,
+          <span style="color: #41b883">Vue.js</span>,
+          <span style="color: #7bc6ff">Vuetify</span> and
+          <v-hover>
+            <template v-slot:default="{ isHovering, props }">
+              <a
+                v-bind="props"
+                class="text-decoration-none text-primary"
+                href="https://somegit.dev/CSGOWTF/csgowtf"
+                target="_blank">
+                <v-icon v-bind="props" icon="mdi-git" :color="isHovering ? '#609926' : 'primary'" />
+              </a>
+            </template>
+          </v-hover>
+        </p>
+
+        <v-sheet color="transparent" class="d-flex mt-2" style="gap: 25px">
+          <v-hover>
+            <template v-slot:default="{ isHovering, props }">
+              <a
+                v-bind="props"
+                :style="`opacity: ${isHovering ? '0.8' : '1'}`"
+                class="text-decoration-none text-primary"
+                href="https://somegit.dev/CSGOWTF/csgowtf/issues"
+                target="_blank">
+                Issue Tracker
+              </a>
+            </template>
+          </v-hover>
+
+          <p style="opacity: 0.5">Version {{ appVersion }}</p>
+
+          <v-hover>
+            <template v-slot:default="{ isHovering, props }">
+              <a
+                v-bind="props"
+                :style="`opacity: ${isHovering ? '0.8' : '1'}`"
+                class="text-decoration-none text-primary"
+                href="/privacy-policy">
+                Privacy Policy
+              </a>
+            </template>
+          </v-hover>
+        </v-sheet>
+      </v-sheet>
+    </v-sheet>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+const appVersion = __APP_VERSION__
+</script>

src/components/MainNav.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-app-bar color="secondary" class="px-16">
+    <template #prepend>
+      <v-img
+        src="/images/logo.svg"
+        width="70"
+        @click.stop="router.push({ name: 'Home' })"
+        style="cursor: pointer" />
+
+      <v-sheet color="transparent" height="100%" class="d-flex justify-center align-center ms-16">
+        <v-hover>
+          <template #default="{ isHovering, props }">
+            <router-link
+              v-bind="props"
+              :to="{ name: 'Matches' }"
+              replace
+              color="primary"
+              style="font-size: 22px; font-weight: 300"
+              exact-active-class="active-border"
+              class="text-white text-decoration-none"
+              :class="isHovering ? 'active-border' : ''">
+              Matches
+            </router-link>
+          </template>
+        </v-hover>
+      </v-sheet>
+    </template>
+
+    <template #append>
+      <v-sheet color="transparent" height="100%" class="d-flex justify-center align-center">
+        <v-text-field
+          v-model="searchInput"
+          @keydown.enter.stop="handleSearchInput"
+          clearable
+          variant="outlined"
+          density="compact"
+          placeholder="SteamID64, Profile Link or Custom URL"
+          style="height: 44px; width: 400px">
+          <template #append-inner>
+            <v-icon icon="mdi-magnify" />
+          </template>
+        </v-text-field>
+
+        <v-btn
+          variant="outlined"
+          color="info"
+          class="ms-2"
+          height="44px"
+          @click.stop="handleSearchInput">
+          Search
+        </v-btn>
+      </v-sheet>
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import router from '@/router'
+import { ref } from 'vue'
+
+const searchInput = ref('')
+
+const handleSearchInput = () => {
+  console.log(searchInput.value)
+  //   TODO Functionality
+}
+</script>
+
+<style lang="scss">
+.active-border {
+  box-shadow: 0 4px 1px -2px #c3a235;
+}
+</style>