Add external links to sub navigation menu

src/components/SubNavigationPills/index.tsx

@@ -6,13 +6,15 @@ import {
   HStack,
   Stack,
   useColorModeValue,
+  LinkProps,
 } from "@threshold-network/components"
 import { matchPath, resolvePath, useLocation } from "react-router-dom"
 import { RouteProps } from "../../types"
 import Link from "../Link"
 
 interface SubNavigationPillsProps {
   links: RouteProps[]
+  externalLinks?: LinkProps[]
 }
 
 interface PathMatchResult {
@@ -26,11 +28,15 @@ interface NavPill extends RouteProps {
   isActive?: boolean
 }
 
-const SubNavigationPills: FC<SubNavigationPillsProps> = ({ links }) => {
+const SubNavigationPills: FC<SubNavigationPillsProps> = ({
+  links,
+  externalLinks,
+}) => {
   const { pathname } = useLocation()
   const linksWithTitle = links.filter((link) => !!link.title)
   const activePillIndex = getActivePillIndex(linksWithTitle, pathname)
   const wrapperBorderColor = useColorModeValue("gray.100", "gray.700")
+  const externalLinkColor = useColorModeValue("gray.500", "gray.300")
 
   return (
     <>
@@ -55,6 +61,19 @@ const SubNavigationPills: FC<SubNavigationPillsProps> = ({ links }) => {
             const isActive = index === activePillIndex
             return renderPill(linkWithTitle, isActive)
           })}
+          {externalLinks &&
+            externalLinks.map(({ title, href }, index) => (
+              <Link
+                key={index}
+                color={externalLinkColor}
+                isExternal
+                href={href!}
+                textDecoration="none"
+                _hover={{ textDecoration: "none" }}
+              >
+                {title}
+              </Link>
+            ))}
         </HStack>
       </Box>
     </>

src/pages/PageLayout.tsx

@@ -2,17 +2,19 @@ import { FC } from "react"
 import { Container, ContainerProps } from "@threshold-network/components"
 import { Outlet } from "react-router-dom"
 import SubNavigationPills from "../components/SubNavigationPills"
-import { PageComponent } from "../types"
+import { PageComponent, ExternalLinkProps } from "../types"
 import useDocumentTitle from "../hooks/useDocumentTitle"
 
 export interface PageLayoutProps extends ContainerProps {
   pages?: PageComponent[]
   title?: string
+  externalLinks?: ExternalLinkProps[]
 }
 
 const PageLayout: FC<PageLayoutProps> = ({
   pages,
   title,
+  externalLinks,
   children,
   ...restProps
 }) => {
@@ -23,7 +25,9 @@ const PageLayout: FC<PageLayoutProps> = ({
 
   return (
     <>
-      {links.length > 0 && <SubNavigationPills links={links} />}
+      {links.length > 0 && (
+        <SubNavigationPills links={links} externalLinks={externalLinks} />
+      )}
       <Container
         maxW={{ base: "2xl", xl: "6xl" }}
         mt="6.25rem"

src/pages/tBTC/Explorer/index.tsx

@@ -245,4 +245,5 @@ ExplorerPage.route = {
   path: "explorer",
   index: false,
   isPageEnabled: true,
+  hideFromMenu: true,
 }

src/pages/tBTC/index.tsx

@@ -7,7 +7,20 @@ import { ExplorerPage } from "./Explorer"
 import { ResumeDepositPage } from "./Bridge/ResumeDeposit"
 
 const MainTBTCPage: PageComponent = (props) => {
-  return <PageLayout title={props.title} pages={props.pages} />
+  const externalLinks = [
+    {
+      title: "tBTC Explorer",
+      href: "https://tbtcscan.com/",
+    },
+  ]
+
+  return (
+    <PageLayout
+      title={props.title}
+      pages={props.pages}
+      externalLinks={externalLinks}
+    />
+  )
 }
 
 MainTBTCPage.route = {

src/types/page.ts

@@ -1,4 +1,5 @@
 import { FC } from "react"
+import { LinkProps } from "@threshold-network/components"
 
 export type RouteProps = {
   path: string
@@ -15,3 +16,7 @@ export type RouteProps = {
 export type PageComponent = FC<RouteProps> & {
   route: RouteProps
 }
+
+export type ExternalLinkProps = LinkProps & {
+  title: string
+}