Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Nov 12, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d005007
feat: update Header
jamiehenson Oct 13, 2025
c562b58
feat: add redesigned left navigation sidebar
jamiehenson Oct 20, 2025
b6cde76
feat: add redesigned right sidebar nav with stepped functionality
jamiehenson Nov 7, 2025
eb867fc
chore: add test page to showcase stepped right sidebar
jamiehenson Nov 7, 2025
8199dbc
chore: shift location of inkeep-search bar between desktop and mobile…
jamiehenson Nov 7, 2025
e444108
chore: update navigation component tests to respect new functionality
jamiehenson Nov 10, 2025
3141514
chore: render empty divs for null nav elements to preserve gap
jamiehenson Nov 10, 2025
8f72124
fix: post-review code tidyups for core nav components
jamiehenson Nov 12, 2025
39a73bb
fix: make leftsidebar bolding conditions dependent on open state and …
jamiehenson Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
25 changes: 2 additions & 23 deletions src/components/Layout/Header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [] }}>
Expand Down
Loading