Merge pull request #2652 from ably/web-4440-native-desktop-nav

[WEB-4443] Semantic links for desktop header tabs

Author: jamiehenson

package.json

@@ -40,7 +40,7 @@
     "validate-llms-txt": "ts-node bin/validate-llms.txt.ts"
   },
   "dependencies": {
-    "@ably/ui": "17.0.0",
+    "@ably/ui": "17.1.0",
     "@codesandbox/sandpack-react": "^2.20.0",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@gfx/zopfli": "^1.0.15",

src/components/Examples/ExamplesList.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { examples } from '../../data/examples/';
+import Link from '../Link';
 
 const ExamplesList: React.FC = () => {
   return (
     <div className="flex flex-col gap-6 py-3">
       {examples.map((example) => (
-        <a
+        <Link
           key={example.name}
-          href={'#'}
+          to={example.id ? `/examples/${example.id}` : '#'}
           className="px-4 ui-text-label1 text-neutral-1000 dark:text-neutral-300 font-bold hover:text-neutral-1300 dark:hover:text-neutral-000"
         >
           {example.name}
-        </a>
+        </Link>
       ))}
     </div>
   );

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" />,

src/components/Layout/LeftSidebar.tsx

@@ -228,7 +228,7 @@ const LeftSidebar = ({ inHeader = false }: LeftSidebarProps) => {
         'overflow-y-auto',
         hasScrollbar ? 'md:pr-2' : 'md:pr-4',
       )}
-      style={sidebarAlignmentStyles}
+      style={!inHeader ? sidebarAlignmentStyles : {}}
       id={inHeader ? 'mobile-nav' : 'left-nav'}
       data={productNavData}
       {...commonAccordionOptions(null, activePage.tree[0]?.index, true, inHeader)}

yarn.lock

@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@ably/ui@17.0.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-17.0.0.tgz#c3dce13df783fd06d374a5312702e4b3692dbe21"
-  integrity sha512-y615+E62OH5EjxElUk6CR5/BRkLkE2Q/mawcxlueNWOxm0TyYVn73KO8OQGIsUumykwy1QpYad/KZqhc1jaw+w==
+"@ably/ui@17.1.0":
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-17.1.0.tgz#5c3612d37cb75668f2ef3058ad96c0bc17761ed9"
+  integrity sha512-tRztxGCwzJ9+9yy/1TurefoTXDjWTvTluOzsQzeZIGD6uRaF/JrA0WggtiYnFnw0FKudQN57ENvXpHpfOZunIg==
   dependencies:
     "@radix-ui/react-accordion" "^1.2.1"
     "@radix-ui/react-navigation-menu" "^1.2.4"