feat: enhance MenuLink component to support external URLs and new tab option

Author: SerVitasik

adminforth/spa/src/components/MenuLink.vue

@@ -1,9 +1,12 @@
 <template>
-  <RouterLink 
-      :to="item.url || { name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
+  <component
+      :is="isExternalUrl(item.url) ? 'a' : RouterLink"
+      v-bind="isExternalUrl(item.url)
+        ? { href: item.url }
+        : { 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="{ 
+      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),
@@ -51,7 +54,7 @@
     <div v-if="(item.badge || item.badge === 0) && isSidebarIconOnly && !isSidebarHovering"  class="af-badge absolute right-0.5 bottom-1 -translate-y-1/2 inline-flex items-center justify-center h-2 w-2 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
       fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
     </div>
-  </RouterLink>
+  </component>
 </template>
 
 <script setup lang="ts">  
@@ -60,13 +63,15 @@ 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';
+import { useRoute, RouterLink } from 'vue-router';
+
+const isExternalUrl = (url: string ) => /^https?:\/\//.test(url || '');
 
 const route = useRoute();
 
 const isItemActive = (item: any) => {
   if (item.url) {
-    return route.fullPath === item.url;
+    return !isExternalUrl(item.url) && route.fullPath === item.url;
   }
 
   if (item.resourceId) {

adminforth/types/Common.ts

@@ -1177,8 +1177,31 @@ export interface AdminForthConfigMenuItem {
    * Item id will be automatically generated from hashed resourceId+Path+label
    */
   itemId?: string,  // todo move to runtime type
+
+
+  /**
+   * If set, menu item will be rendered as external link with this URL. Supported for AdminForthMenuTypes.PAGE and AdminForthMenuTypes.RESOURCE only!
+   * If URL starts with `http://` or `https://`, it will be treated as absolute URL. Otherwise, it will be treated as relative to admin panel base URL.
+   * Example of absolute URL:
+   * 
+   * ```ts
+   * url: 'https://google.com',
+   * ```
+   * 
+   * Example of relative URL:
+   * 
+   * ```ts
+   * url: '/custom-page',
+   * ```
+   */
 
   url?: string
+
+
+  /**   
+   * If true, link will be opened in new tab.
+   */
+  isOpenInNewTab?: boolean,
 }