From 6f07df7c85b89c0d8d52421013c5067ee0df7b79 Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Wed, 12 Oct 2022 10:06:53 +0800
Subject: [PATCH] [app/portal][fix] Add new tab redirection to navigation items
 with target:_blank

---
 .../src/components/global/ProductNavigation.tsx      | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
index 43670585..a051d422 100644
--- a/apps/portal/src/components/global/ProductNavigation.tsx
+++ b/apps/portal/src/components/global/ProductNavigation.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 
 type NavigationItem = Readonly<{
   children?: ReadonlyArray<NavigationItem>;
@@ -58,7 +59,9 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
                               active ? 'bg-slate-100' : '',
                               'block px-4 py-2 text-sm text-slate-700',
                             )}
-                            href={child.href}>
+                            href={child.href}
+                            rel={item.target ? 'noopener noreferrer' : ''}
+                            target={item.target}>
                             {child.name}
                           </Link>
                         )}
@@ -75,8 +78,13 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
                 'hover:text-primary-600 inline-flex h-full items-center border-y-2 border-t-transparent text-sm font-medium text-slate-900',
                 isActive ? 'border-b-primary-500' : 'border-b-transparent',
               )}
-              href={item.href}>
+              href={item.href}
+              rel={item.target ? 'noopener noreferrer' : ''}
+              target={item.target}>
               {item.name}
+              {item.target ? (
+                <ArrowTopRightOnSquareIcon className="h-5 w-5 pl-1" />
+              ) : null}
             </Link>
           );
         })}