Merge pull request #2952 from ably/web-4684-docs-nav-update

[WEB-4684] Core navigation component redesign (LeftSidebar, Header, RightSidebar)

Author: jamiehenson

package.json

@@ -47,6 +47,9 @@
     "@gfx/zopfli": "^1.0.15",
     "@intercom/messenger-js-sdk": "^0.0.14",
     "@mdx-js/react": "^2.3.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hook/media-query": "^1.1.1",
     "@sentry/gatsby": "^9.19.0",
     "@types/cheerio": "^0.22.31",

src/components/Layout/Header.test.tsx

@@ -56,40 +56,19 @@ describe('Header', () => {
 
   it('renders the header with logo and links', () => {
     render(<Header />);
-    expect(screen.getAllByAltText('Ably logo').length).toBeGreaterThan(0);
+    expect(screen.getByAltText('Ably')).toBeInTheDocument();
 
-    expect(screen.getByText('Docs')).toBeInTheDocument();
+    expect(screen.getAllByText('Docs')).toHaveLength(2);
     expect(screen.getByText('Examples')).toBeInTheDocument();
   });
 
-  it('renders the search bar when searchBar is true', () => {
-    render(<Header searchBar={true} />);
-    expect(screen.getByText('SearchBar')).toBeInTheDocument();
-  });
-
-  it('does not render the search bar when searchBar is false', () => {
-    render(<Header searchBar={false} />);
-    expect(screen.queryByText('SearchBar')).not.toBeInTheDocument();
-  });
-
   it('toggles the mobile menu when the burger icon is clicked', () => {
     render(<Header />);
     const burgerIcon = screen.getByText('icon-gui-bars-3-outline');
     fireEvent.click(burgerIcon);
-    expect(screen.getByText('icon-gui-x-mark-outline')).toBeInTheDocument();
     expect(screen.getByText('LeftSidebar')).toBeInTheDocument();
   });
 
-  it('disables scrolling when the mobile menu is open', () => {
-    render(<Header />);
-    const burgerIcon = screen.getByText('icon-gui-bars-3-outline');
-    fireEvent.click(burgerIcon);
-    expect(document.body).toHaveClass('overflow-hidden');
-    const closeIcon = screen.getByText('icon-gui-x-mark-outline');
-    fireEvent.click(closeIcon);
-    expect(document.body).not.toHaveClass('overflow-hidden');
-  });
-
   it('renders the sign in buttons when not signed in', () => {
     render(
       <UserContext.Provider value={{ sessionState: { signedIn: false }, apps: [] }}>