working links

frontend/src/components/Header.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { setLogout } from '../lib/api'
 import lf from "localforage";
 import Menubar from "primevue/menubar";
 import Button from "primevue/button";
 
 const router = useRouter();
+const route = useRoute();
 
 const logout = async () => {
   await lf.clear();
@@ -18,22 +19,31 @@ const logout = async () => {
 const items = [
   {
     label: "Übersicht",
-    to: "/orga",
+    route: "/orga",
   },
   {
     label: "Profil",
-    to: "/orga/profile",
+    route: "/orga/profile",
   },
   {
     label: "FAQ",
-    to: "/orga/faq",
+    route: "/orga/faq",
   },
 ];
 </script>
 <template>
   <header>
     <Menubar :model="items">
-      <template #start> Pretty Good Propopsal V2 </template>
+      <template #start> Pretty Good Propopsal V2
+
+      </template>
+      <template #item="{ item, props }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+          <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+            <span class="ml-2">{{ item.label }}</span>
+          </a>
+        </router-link>
+      </template>
       <template #end>
         <Button label="Logout" @click="logout" />
       </template>

frontend/src/views/orga/Proposal.vue

@@ -26,10 +26,13 @@ const myOpinion = ref(null);
 const currentUserId = ref(null);
 const toast = useToast();
 const home = ref({
-  label: "Bewerbungen Übersicht",
-  to: "/orga",
+  label: "Übersicht",
+  route: "/orga",
 });
-const items = ref([{ label: "Computer" }]);
+const items = ref([{
+  label: 'Track',
+  route: `/orga/track/${route.params.id}`,
+}]);
 const proposalData = ref(null);
 
 const getPrivateKey = () => new Promise((resolve, reject) => {
@@ -89,7 +92,15 @@ const fieldName = (name) => {
     <ProgressSpinner />
   </template>
   <template v-else>
-    <Breadcrumb :home="home" :model="items" />
+    <Breadcrumb :home="home" :model="items">
+      <template #item="{ item, props }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+          <a :href="href" v-bind="props.action" @click="navigate">
+            <span class="text-primary font-semibold">{{ item.label }}</span>
+          </a>
+        </router-link>
+      </template>
+    </Breadcrumb>
     <div class="grid">
       <div class="col">
         <Card>