fix: supply Gatsby link tabs to header TabMenu

Author: jamiehenson

src/components/Layout/Header.test.tsx

@@ -37,6 +37,14 @@ jest.mock('./LanguageSelector', () => ({
   LanguageSelector: jest.fn(() => <div>LanguageSelector</div>),
 }));
 
+jest.mock('../Link', () => {
+  const MockLink: React.FC<{ to: string; children: React.ReactNode; className?: string }> = ({ children }) => (
+    <a>{children}</a>
+  );
+  MockLink.displayName = 'MockLink';
+  return MockLink;
+});
+
 describe('Header', () => {
   beforeEach(() => {
     document.body.innerHTML = '';

src/components/Layout/Header.tsx

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
-import { navigate, useLocation } from '@reach/router';
+import { useLocation } from '@reach/router';
 import Icon from '@ably/ui/core/Icon';
 import AblyHeader from '@ably/ui/core/Header';
 import { SearchBar } from '../SearchBar';
 import LeftSidebar from './LeftSidebar';
 import UserContext from 'src/contexts/user-context';
 import ExamplesList from '../Examples/ExamplesList';
 import TabMenu from '@ably/ui/core/TabMenu';
+import Link from '../Link';
 
 type HeaderProps = {
   searchBar?: boolean;
@@ -23,18 +24,22 @@ const Header: React.FC<HeaderProps> = ({ searchBar = true }) => {
     account: userContext.sessionState.account ?? { links: { dashboard: { href: '#' } } },
   };
 
-  const tabs = ['Docs', 'Examples'];
-  const tabLinks = ['/docs', '/examples'];
+  const desktopTabs = [
+    <Link key="docs" to="/docs" className="p-4">
+      Docs
+    </Link>,
+    <Link key="examples" to="/examples" className="p-4">
+      Examples
+    </Link>,
+  ];
+  const mobileTabs = ['Docs', 'Examples'];
 
   return (
     <AblyHeader
       nav={
         <TabMenu
-          tabs={tabs}
-          tabClassName="ui-text-menu3 !px-4"
-          tabOnClick={(index) => {
-            navigate(tabLinks[index] ?? '#');
-          }}
+          tabs={desktopTabs}
+          tabClassName="!p-0"
           options={{
             underline: false,
             flexibleTabHeight: true,
@@ -44,7 +49,7 @@ const Header: React.FC<HeaderProps> = ({ searchBar = true }) => {
       }
       mobileNav={
         <TabMenu
-          tabs={tabs}
+          tabs={mobileTabs}
           contents={[
             <LeftSidebar inHeader key="nav-mobile-documentation-tab" />,
             <ExamplesList key="nav-mobile-examples-tab" />,