From 1dde9606bec2a3091e9d4a17ac1bc654c693c8f2 Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Sat, 25 Nov 2023 13:35:19 -0700
Subject: [PATCH] Fix usage of deprecated property of PrimeVue's MenuItem.

---
 app.vue     |  8 ++++++--
 data/nav.ts | 22 ++++++++++++----------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app.vue b/app.vue
index 8c2fb7a..fe1cd87 100644
--- a/app.vue
+++ b/app.vue
@@ -54,12 +54,16 @@ const menuPassThroughOptions: MenuPassThroughOptions = {
     <template #default>
       <Menu :model="navMenuItems" :pt="menuPassThroughOptions">
         <template #item="{ label, item, props }">
-          <RouterLink :to="item.to!" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
+          <RouterLink v-if="item.route" :to="item.route" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
             <a :href="href" v-bind="props.action" @click="navigate($event).then(() => isSidebarVisible = false)" :class="{ 'router-link-active': isActive, 'router-link-exact-active': isExactActive }">
               <span v-bind="props.icon" />
               <span v-bind="props.label">{{ label }}</span>
             </a>
           </RouterLink>
+          <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+          </a>
         </template>
       </Menu>
 
@@ -71,7 +75,7 @@ const menuPassThroughOptions: MenuPassThroughOptions = {
 
   <div class="flex flex-col items-center min-h-screen">
     <div class="flex justify-between items-center w-full p-1">
-      <RouterLink :to="homeMenuItem.to!" :title="homeMenuItem.label" class="inline-block p-2">
+      <RouterLink :to="homeMenuItem.route" :title="homeMenuItem.label" class="inline-block p-2">
         <img :src="`${config.app.baseURL}favicon/favicon-32x32.png`" :alt="homeMenuItem.label as string" />
       </RouterLink>
 
diff --git a/data/nav.ts b/data/nav.ts
index 729db46..5af3a4e 100644
--- a/data/nav.ts
+++ b/data/nav.ts
@@ -1,38 +1,40 @@
-import type { MatcherLocationAsPath } from "vue-router";
 import type { MenuItem } from "primevue/menuitem";
 
 export const homeMenuItem: MenuItem = {
     key: 'home',
     label: 'Home',
     icon: 'pi pi-home pi-fw',
-    //TODO deprecated
-    to: { path: '/' } as MatcherLocationAsPath
+    route: '/'
 };
 export const lineupMenuItem: MenuItem = {
     key: 'lineup',
     label: 'Lineup',
     icon: 'pi pi-user-edit pi-fw',
-    //TODO deprecated
-    to: { path: '/lineup' } as MatcherLocationAsPath
+    route: '/lineup'
 };
 export const scoreboardMenuItem: MenuItem = {
     key: 'scoreboard',
     label: 'Scoreboard',
     icon: 'pi pi-play pi-fw',
-    //TODO deprecated
-    to: { path: '/scoreboard' } as MatcherLocationAsPath
+    route: '/scoreboard'
 };
 export const aboutMenuItem: MenuItem = {
     key: 'about',
     label: 'About',
     icon: 'pi pi-info-circle pi-fw',
-    //TODO deprecated
-    to: { path: '/about' } as MatcherLocationAsPath
+    route: '/about'
 };
+// export const externalLinkExample: MenuItem = {
+//     key: 'external',
+//     label: 'External',
+//     icon: 'pi pi-external-link pi-fw',
+//     url: 'https://site.example',
+//     target: '_blank',
+// };
 
 export const navMenuItems: MenuItem[] = [
     homeMenuItem,
     lineupMenuItem,
     scoreboardMenuItem,
-    aboutMenuItem
+    aboutMenuItem,
 ];