fix: sub menu links should open the correct herf

src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode, type MouseEvent } from 'react'
+import { type HrefOptions } from 'src/utils/utils'
 
 export interface IBaseGlobalNavigationItem {
   type?: 'menu' | 'link'
@@ -20,9 +21,9 @@ export interface IGlobalNavigationMenu extends IBaseGlobalNavigationItem {
 
 export interface IGlobalNavigationLink extends IBaseGlobalNavigationItem {
   type?: 'link'
-  hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' }
+  hrefOptions?: HrefOptions
   hideLabel?: boolean
   onClick?: (e: MouseEvent) => void
 }
 
-export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink
+export type IGlobalNavigationItem = IGlobalNavigationMenu | IGlobalNavigationLink

src/components/navigation/GlobalNavigation/NavigationItem.tsx

@@ -2,6 +2,7 @@ import { type MouseEvent, type ReactNode } from 'react'
 import { NavigationIcon } from 'src/components/navigation/GlobalNavigation/NavigationIcon'
 import { NavigationList } from 'src/components/navigation/GlobalNavigation/NavigationList'
 import { type IGlobalNavigationItem, Tooltip } from 'src/components'
+import { buildLinkFromHrefOptions, type HrefOptions } from 'src/utils/utils'
 
 export interface INavigationItemProps {
   type: 'link' | 'menu'
@@ -11,7 +12,7 @@ export interface INavigationItemProps {
   items?: IGlobalNavigationItem[]
   isActive?: boolean
   onClick?: (e: MouseEvent) => void // link only
-  hrefOptions?: { href: string; hrefTarget?: '_self' | '_blank' } // link only
+  hrefOptions?: HrefOptions // link only
 }
 
 export function NavigationItem(props: INavigationItemProps) {
@@ -31,16 +32,9 @@ export function NavigationItem(props: INavigationItemProps) {
     />
   )
 
-  const resultNavigationIcon = props.hrefOptions ? (
-    <a
-      href={props.hrefOptions.href}
-      target={props.hrefOptions.hrefTarget ?? '_self'}
-      rel={props.hrefOptions.hrefTarget === '_blank' ? 'noopener' : undefined}>
-      {navigationIcon}
-    </a>
-  ) : (
-    navigationIcon
-  )
+  const resultNavigationIcon = props.hrefOptions
+    ? buildLinkFromHrefOptions(navigationIcon, props.hrefOptions)
+    : navigationIcon
 
   if (props.hideLabel) {
     return (
@@ -51,4 +45,4 @@ export function NavigationItem(props: INavigationItemProps) {
   }
 
   return resultNavigationIcon
-}
+}

src/components/navigation/GlobalNavigation/NavigationList.tsx

@@ -6,6 +6,7 @@ import { Center } from 'src/components'
 import { type IGlobalNavigationItem } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 import { type IGlobalNavigationLink } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 import { Fragment } from 'react'
+import { buildLinkFromHrefOptions } from 'src/utils/utils'
 
 export interface INavigationListProps {
   items: IGlobalNavigationItem[]
@@ -43,11 +44,10 @@ function generateMenuItem(item: IGlobalNavigationItem, i: number) {
         ...linkItem,
         expandIcon: linkItem.isNestedMenu ? true : null,
         key: `${String(linkItem.label)}${j}`,
-        label: <a href={linkItem.href}>{linkItem.label}</a>,
+        label: buildLinkFromHrefOptions(linkItem.label, linkItem.hrefOptions),
       })),
     )
   }
-
   const navigationIcon = (
     <NavigationIcon
       icon={item.icon}

src/utils/utils.spec.ts

@@ -56,4 +56,4 @@ describe('Testing utils', () => {
       expect(actualOS).toBe('Macintosh')
     })
   })
-})
+})

src/utils/utils.ts → src/utils/utils.tsx

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react'
+
 export function getInitials(str: string = ''): string {
   const getInitialsRegex = new RegExp(
     '(?:[\\W\\d]*\\b)*' + // Ignore non-word abd number characters that may exist at the beginning of the word
@@ -48,3 +50,16 @@ export function hasImageAtSrc(src: string, hasImageSetter?: (hasImage: boolean)
     img.src = src
   })
 }
+
+export type HrefOptions = { href: string; hrefTarget?: '_self' | '_blank' }
+
+export function buildLinkFromHrefOptions(label: ReactNode, hrefOptions?: HrefOptions): ReactNode {
+  return (
+    <a
+      href={hrefOptions?.href}
+      target={hrefOptions?.hrefTarget ?? '_self'}
+      rel={hrefOptions?.hrefTarget === '_blank' ? 'noopener' : undefined}>
+      {label}
+    </a>
+  )
+}