fix: open external link in new tab for navbar items (#6487)

fix: set link in new tab for navbar items

Author: hisamafahri

components/Containers/NavBar/NavItem/index.tsx

@@ -1,6 +1,6 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
 
 import ActiveLink from '@/components/Common/ActiveLink';
 
@@ -12,23 +12,26 @@ type NavItemProps = {
   href: string;
   type?: NavItemType;
   className?: string;
+  target?: HTMLAttributeAnchorTarget | undefined;
 };
 
 const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
   href = '',
   type = 'nav',
   children,
   className,
+  target,
 }) => (
   <ActiveLink
     href={href}
     className={classNames(styles.navItem, styles[type], className)}
     activeClassName={styles.active}
     allowSubPath={href.startsWith('/')}
+    target={target}
   >
     <span className={styles.label}>{children}</span>
 
-    {type === 'nav' && href.startsWith('http') && (
+    {((type === 'nav' && href.startsWith('http')) || target === '_blank') && (
       <ArrowUpRightIcon className={styles.icon} />
     )}
   </ActiveLink>

components/Containers/NavBar/index.tsx

@@ -4,7 +4,7 @@ import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
 import XMark from '@heroicons/react/24/solid/XMarkIcon';
 import * as Label from '@radix-ui/react-label';
 import { useState } from 'react';
-import type { FC, ComponentProps } from 'react';
+import type { FC, ComponentProps, HTMLAttributeAnchorTarget } from 'react';
 
 import LanguageDropdown from '@/components/Common/LanguageDropDown';
 import { SearchButton } from '@/components/Common/Search';
@@ -24,7 +24,11 @@ const navInteractionIcons = {
 };
 
 type NavbarProps = {
-  navItems: Array<{ text: FormattedMessage; link: string }>;
+  navItems: Array<{
+    text: FormattedMessage;
+    link: string;
+    target?: HTMLAttributeAnchorTarget | undefined;
+  }>;
   languages: ComponentProps<typeof LanguageDropdown>;
   onThemeTogglerClick: () => void;
 };
@@ -57,8 +61,8 @@ const NavBar: FC<NavbarProps> = ({
 
       <div className={`${style.main} peer-checked:flex`}>
         <div className={style.navItems}>
-          {navItems.map(({ text, link }) => (
-            <NavItem key={link} href={link}>
+          {navItems.map(({ text, link, target }) => (
+            <NavItem key={link} href={link} target={target}>
               {text}
             </NavItem>
           ))}

components/withNavBar.tsx

@@ -32,9 +32,10 @@ const WithNavBar: FC = () => {
           availableLanguages: availableLocales,
           onChange: locale => replace(pathname!, { locale: locale.code }),
         }}
-        navItems={navigationItems.map(([, { label, link }]) => ({
+        navItems={navigationItems.map(([, { label, link, target }]) => ({
           link,
           text: label,
+          target,
         }))}
       />
     </div>

hooks/react-generic/useSiteNavigation.ts

@@ -1,5 +1,6 @@
 import { useTranslations } from 'next-intl';
 import type { RichTranslationValues } from 'next-intl';
+import type { HTMLAttributeAnchorTarget } from 'react';
 
 import { siteNavigation } from '@/next.json.mjs';
 import type {
@@ -15,6 +16,7 @@ interface MappedNavigationEntry {
   items: Array<[string, MappedNavigationEntry]>;
   label: FormattedMessage;
   link: string;
+  target?: HTMLAttributeAnchorTarget | undefined;
 }
 
 // Provides Context replacement for variables within the Link. This is also something that is not going
@@ -40,9 +42,13 @@ const useSiteNavigation = () => {
       t.rich(label, context[key] || {});
 
     return Object.entries(entries).map(
-      ([key, { label, link, items }]): [string, MappedNavigationEntry] => [
+      ([key, { label, link, items, target }]): [
+        string,
+        MappedNavigationEntry,
+      ] => [
         key,
         {
+          target,
           label: label ? getFormattedMessage(label, key) : '',
           link: link ? replaceLinkWithContext(link, context[key]) : '',
           items: items ? mapNavigationEntries(items, context) : [],

navigation.json

@@ -18,11 +18,13 @@
     },
     "docs": {
       "link": "https://nodejs.org/docs/latest/api/",
-      "label": "components.containers.navBar.links.docs"
+      "label": "components.containers.navBar.links.docs",
+      "target": "_blank"
     },
     "certification": {
       "link": "https://openjsf.org/certification",
-      "label": "components.containers.navBar.links.certification"
+      "label": "components.containers.navBar.links.certification",
+      "target": "_blank"
     }
   },
   "footerLinks": [

types/navigation.ts

@@ -1,3 +1,5 @@
+import type { HTMLAttributeAnchorTarget } from 'react';
+
 export interface FooterConfig {
   text: string;
   link: string;
@@ -22,6 +24,7 @@ export interface NavigationEntry {
   label?: string;
   link?: string;
   items?: Record<string, NavigationEntry>;
+  target?: HTMLAttributeAnchorTarget | undefined;
 }
 
 export interface SiteNavigation {