Merge pull request #504 from devforth/feature/AdminForth/1320/add-url-property-to-menu-item-

feat: add URL property to AdminForthConfigMenuItem and handle URL cli…

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/10-menuConfiguration.md

@@ -278,3 +278,23 @@ auth: {
 This syntax can be use to get unique avatar for each user of hardcode avatar, but it makes more sense to use it with [upload plugin](https://adminforth.dev/docs/tutorial/Plugins/upload/#using-plugin-for-uploading-avatar)
 
 
+## Custom URL
+You can use the url property to override default navigation. This is useful for linking to pre-filtered lists or external sites.
+
+
+```ts title='./index.ts'
+
+menu: [
+    {
+      label: 'Posts',
+      icon: 'flowbite:book-open-outline',
+      resourceId: 'posts',
+      //diff-add
+      url: '/resource/aparts?filter__country__in=["DE"]',  
+      //diff-add
+      isOpenInNewTab: true // You can also add isOpenInNewTab: true to open the link in a new browser tab
+    },
+  ],
+
+```
+> 👆 Please note start internal URLs with a leading / to ensure correct routing.

adminforth/spa/src/components/MenuLink.vue

@@ -1,15 +1,14 @@
 <template>
   <RouterLink 
-      :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
+      :to="item.url || { name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
+      :target="item.isOpenInNewTab ? '_blank' : '_self'"
       class="af-menu-link flex group relative items-center w-full py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default transition-all duration-200 ease-in-out" 
       :class="{ 
         'hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover': !['divider', 'gap', 'heading'].includes(item.type),
         'pl-6 pr-3.5': (isChild && !isSidebarIconOnly && !isSidebarHovering) || (isChild && isSidebarIconOnly && isSidebarHovering),
         'px-3.5 ': !isChild || (isSidebarIconOnly && !isSidebarHovering),
         'max-w-12': isSidebarIconOnly && !isSidebarHovering,
-        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
-        ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
-        ($route.name === item.path)
+        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': isItemActive(item)
       }"
   >
     <component v-if="item.icon" :is="getIcon(item.icon)" 
@@ -61,6 +60,21 @@ import { Tooltip } from '@/afcl';
 import { ref, watch, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { IconFileImageOutline } from '@iconify-prerendered/vue-flowbite';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const isItemActive = (item: any) => {
+  if (item.url) {
+    return route.fullPath === item.url;
+  }
+
+  if (item.resourceId) {
+    return route.params.resourceId === item.resourceId && route.name === 'resource-list';
+  }
+
+  return route.name === item.path;
+};
 
 const props = defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);
 

adminforth/types/Common.ts

@@ -1122,6 +1122,8 @@ export interface AdminForthConfigMenuItem {
    * Item id will be automatically generated from hashed resourceId+Path+label
    */
   itemId?: string,  // todo move to runtime type
+  
+  url?: string
 }