Add addressbar

software/src/components/navigation/urlBar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+const path = ref(router.currentRoute.value.fullPath)
+
+function navigate() {
+  router.replace({ path: path.value.substring(path.value.indexOf('.com') + 4) })
+}
+
+watch(() => router.currentRoute.value.fullPath, () => {
+  path.value = "https://www.eventmaster.com" + router.currentRoute.value.fullPath
+})
+</script>
+
+<template>
+  <v-app-bar
+    elevation="0"
+    height="50"
+  >
+    <v-row>
+      <v-col></v-col>
+      <v-col cols="auto" class="d-flex justify-start align-center">
+        <v-btn
+          density="comfortable"
+          icon="mdi-arrow-left"
+          @click="router.go(-1)"
+        />
+        <v-btn
+          density="comfortable"
+          icon="mdi-arrow-right"
+          @click="router.go(1)"
+        />
+        <v-btn
+          density="comfortable"
+          icon="mdi-refresh"
+          @click="router.replace({ path: router.currentRoute.value.fullPath })"
+        />
+      </v-col>
+
+      <v-col cols="8">
+        <v-text-field
+          variant="outlined"
+          density="compact"
+          hide-details
+          @keyup.enter="navigate"
+          v-model="path"
+        />
+      </v-col>
+
+      <v-col cols="2" class="d-flex justify-start align-center">
+        <v-btn
+          density="comfortable"
+          icon="mdi-arrow-right"
+          @click="navigate"
+        />
+      </v-col>
+
+    </v-row>
+  </v-app-bar>
+</template>