From d6147843e5cd76e4487c56b31aa53c220d838733 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Wed, 15 Jan 2025 00:59:31 -0600
Subject: [PATCH] Fix typing on sidebar menus.

---
 frontend/components/Common/SidebarMenu.vue | 22 +++++++++++++---------
 frontend/functions/filterMenu.ts           |  6 ++++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/components/Common/SidebarMenu.vue b/frontend/components/Common/SidebarMenu.vue
index 35fdf32322..536e6a5c06 100644
--- a/frontend/components/Common/SidebarMenu.vue
+++ b/frontend/components/Common/SidebarMenu.vue
@@ -6,7 +6,7 @@
             class="nav-item"
         >
             <router-link
-                v-if="isRouteLink(category)"
+                v-if="isRouteLink(category.url)"
                 :class="getLinkClass(category)"
                 :to="category.url"
                 class="nav-link"
@@ -49,7 +49,7 @@
                         class="nav-item"
                     >
                         <router-link
-                            v-if="isRouteLink(item)"
+                            v-if="isRouteLink(item.url)"
                             :to="item.url"
                             class="nav-link ps-4 py-2"
                             :class="getLinkClass(item)"
@@ -85,25 +85,29 @@ import Icon from "~/components/Common/Icon.vue";
 import {useRoute} from "vue-router";
 import {some} from "lodash";
 import {IconOpenInNew} from "~/components/Common/icons.ts";
-import {MenuCategory, MenuSubCategory, ReactiveMenu} from "~/functions/filterMenu.ts";
+import {MenuCategory, MenuRouteBasedUrl, MenuRouteUrl, MenuSubCategory} from "~/functions/filterMenu.ts";
 
 const props = defineProps<{
-    menu: ReactiveMenu
+    menu: MenuCategory[]
 }>();
 
 const currentRoute = useRoute();
 
-const isRouteLink = (item: MenuSubCategory) => {
-    return (typeof (item.url) !== 'undefined')
-        && (typeof (item.url) !== 'string');
+const isRouteLink = (url: MenuRouteUrl): url is MenuRouteBasedUrl => {
+    return (typeof (url) !== 'undefined')
+        && (typeof (url) !== 'string');
 };
 
+const isCategory = (item: MenuCategory | MenuSubCategory): item is MenuCategory => {
+    return 'items' in item;
+}
+
 const isActiveItem = (item: MenuCategory | MenuSubCategory) => {
-    if ('items' in item && some(item.items, isActiveItem)) {
+    if (isCategory(item) && some(item.items ?? [], isActiveItem)) {
         return true;
     }
 
-    return isRouteLink(item) && !('params' in item.url) && item.url.name === currentRoute.name;
+    return isRouteLink(item.url) && !('params' in item.url) && item.url.name === currentRoute.name;
 };
 
 const getLinkClass = (item: MenuSubCategory) => {
diff --git a/frontend/functions/filterMenu.ts b/frontend/functions/filterMenu.ts
index 273ac70502..fb4f49347e 100644
--- a/frontend/functions/filterMenu.ts
+++ b/frontend/functions/filterMenu.ts
@@ -5,15 +5,17 @@ import {reactiveComputed} from "@vueuse/core";
 
 export type ReactiveMenu = Reactive<MenuCategory[]>;
 
-interface RouteBasedUrl {
+export interface MenuRouteBasedUrl {
     name: string,
     params?: Record<string, any>
 }
 
+export type MenuRouteUrl = string | MenuRouteBasedUrl;
+
 export interface MenuSubCategory {
     key: string,
     label: ComputedRef<string>,
-    url?: string | RouteBasedUrl,
+    url?: MenuRouteUrl,
     icon?: Icon,
     visible?: boolean,
     external?: boolean,