Skip to content

Commit 4a15d83

Browse files
jamiehensonjamiehenson
committed
fix: post-review code tidyups for core nav components
1 parent a5bb995 commit 4a15d83

File tree

4 files changed

+52
-52
lines changed

4 files changed

+52
-52
lines changed

‎src/components/Layout/Header.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('Header', () => {
5858
render(<Header />);
5959
expect(screen.getByAltText('Ably')).toBeInTheDocument();
6060

61-
expect(screen.getByText('Docs')).toBeInTheDocument();
61+
expect(screen.getAllByText('Docs')).toHaveLength(2);
6262
expect(screen.getByText('Examples')).toBeInTheDocument();
6363
});
6464

‎src/components/Layout/Header.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,11 @@ const Header: React.FC = () => {
7676

7777
useEffect(() => {
7878
const handleClickOutside = (event: MouseEvent) => {
79-
if (
80-
isMobileMenuOpen &&
81-
mobileMenuRef.current &&
82-
!mobileMenuRef.current.contains(event.target as Node) &&
83-
burgerButtonRef.current &&
84-
!burgerButtonRef.current.contains(event.target as Node)
85-
) {
79+
const target = event.target as HTMLElement;
80+
const clickedOutsideMenu = mobileMenuRef.current && !mobileMenuRef.current.contains(target);
81+
const clickedOutsideBurgerButton = burgerButtonRef.current && !burgerButtonRef.current.contains(target);
82+
83+
if (isMobileMenuOpen && clickedOutsideMenu && clickedOutsideBurgerButton) {
8684
setIsMobileMenuOpen(false);
8785
}
8886
};
@@ -116,12 +114,12 @@ const Header: React.FC = () => {
116114
<div className="flex items-center gap-8">
117115
<a href="/docs" className="flex items-center gap-2 focus-base p-2 rounded -ml-2">
118116
<img src={Logo} width="96px" alt="Ably" />
119-
<span className="bg-orange-100 dark:bg-orange-1000 text-[10px] font-bold text-neutral-700 dark:text-neutral-600 px-1.5 py-[3px] rounded-md">
120-
DOCS
117+
<span className="bg-orange-100 dark:bg-orange-1000 text-[10px] font-bold text-neutral-700 dark:text-neutral-600 px-1.5 py-[3px] rounded-md uppercase">
118+
Docs
121119
</span>
122120
</a>
123121
<TabMenu
124-
rootClassName="h-16"
122+
rootClassName="hidden md:flex h-16"
125123
tabs={desktopTabs}
126124
tabClassName="!p-0"
127125
options={{

‎src/components/Layout/LeftSidebar.tsx‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { useEffect, useRef, useState } from 'react';
12
import * as Accordion from '@radix-ui/react-accordion';
23
import cn from '@ably/ui/core/utils/cn';
34
import Icon from '@ably/ui/core/Icon';
4-
import { useEffect, useRef, useState } from 'react';
55

66
import { productData } from 'src/data';
77
import { NavProductContent, NavProductPage } from 'src/data/nav/types';
@@ -136,44 +136,48 @@ const LeftSidebar = ({ inHeader = false }: LeftSidebarProps) => {
136136
setOpenProduct(value);
137137
}}
138138
>
139-
{Object.entries(productData).map(([productKey, productObj], index) => (
140-
<Accordion.Item
141-
key={productKey}
142-
value={`item-${index}`}
143-
className="border-b border-neutral-300 dark:border-neutral-1000"
144-
>
145-
<Accordion.Trigger
146-
className={cn(
147-
'group/accordion-trigger',
148-
accordionTriggerClassName,
149-
'data-[state=open]:border-b data-[state=open]:sticky data-[state=open]:top-0 data-[state=open]:text-neutral-1300 dark:data-[state=open]:text-neutral-000 [&[data-state=open]_svg]:text-orange-600 h-12 px-4 py-3 font-bold',
150-
openProduct === `item-${index}` && 'text-neutral-1300 dark:text-neutral-000',
151-
)}
139+
{Object.entries(productData).map(([productKey, productObj], index) => {
140+
const isActive = openProduct === `item-${index}`;
141+
142+
return (
143+
<Accordion.Item
144+
key={productKey}
145+
value={`item-${index}`}
146+
className="border-b border-neutral-300 dark:border-neutral-1000"
152147
>
153-
<div className="flex-1 flex items-center gap-2">
148+
<Accordion.Trigger
149+
className={cn(
150+
'group/accordion-trigger',
151+
accordionTriggerClassName,
152+
'data-[state=open]:border-b data-[state=open]:sticky data-[state=open]:top-0 data-[state=open]:text-neutral-1300 dark:data-[state=open]:text-neutral-000 [&[data-state=open]_svg]:text-orange-600 h-12 px-4 py-3 font-bold',
153+
isActive && 'text-neutral-1300 dark:text-neutral-000',
154+
)}
155+
>
156+
<div className="flex-1 flex items-center gap-2">
157+
<Icon
158+
name={isActive ? productObj.nav.icon.open : productObj.nav.icon.closed}
159+
additionalCSS={cn(
160+
iconClassName,
161+
isActive
162+
? 'text-orange-600'
163+
: 'text-neutral-900 dark:text-neutral-400 group-hover/accordion-trigger:text-neutral-1300 dark:group-hover/accordion-trigger:text-neutral-000',
164+
)}
165+
size="20px"
166+
/>
167+
<span>{productObj.nav.name}</span>
168+
</div>
154169
<Icon
155-
name={openProduct === `item-${index}` ? productObj.nav.icon.open : productObj.nav.icon.closed}
156-
additionalCSS={cn(
157-
iconClassName,
158-
openProduct === `item-${index}`
159-
? 'text-orange-600'
160-
: 'text-neutral-900 dark:text-neutral-400 group-hover/accordion-trigger:text-neutral-1300 dark:group-hover/accordion-trigger:text-neutral-000',
161-
)}
162-
size="20px"
170+
name="icon-gui-chevron-right-outline"
171+
additionalCSS={cn(iconClassName, '!text-neutral-900 dark:!text-neutral-400')}
172+
size="12px"
163173
/>
164-
<span>{productObj.nav.name}</span>
165-
</div>
166-
<Icon
167-
name="icon-gui-chevron-right-outline"
168-
additionalCSS={cn(iconClassName, '!text-neutral-900 dark:!text-neutral-400')}
169-
size="12px"
170-
/>
171-
</Accordion.Trigger>
172-
<Accordion.Content className={cn(accordionContentClassName, 'px-2 py-3')}>
173-
<ChildAccordion content={productObj.nav.content} layer={0} tree={[index]} />
174-
</Accordion.Content>
175-
</Accordion.Item>
176-
))}
174+
</Accordion.Trigger>
175+
<Accordion.Content className={cn(accordionContentClassName, 'px-2 py-3')}>
176+
<ChildAccordion content={productObj.nav.content} layer={0} tree={[index]} />
177+
</Accordion.Content>
178+
</Accordion.Item>
179+
);
180+
})}
177181
</Accordion.Root>
178182
</div>
179183
);

‎src/components/SearchBar/InkeepSearchBar.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { CSSProperties } from 'react';
1+
import { CSSProperties, forwardRef } from 'react';
22

3-
import { forwardRef } from 'react';
4-
5-
export const InkeepSearchBar = forwardRef<HTMLDivElement, { className?: string; extraInputStyle: CSSProperties }>(
6-
({ className, extraInputStyle }, ref) => {
3+
export const InkeepSearchBar = forwardRef<HTMLDivElement, { className?: string; extraInputStyle?: CSSProperties }>(
4+
({ className, extraInputStyle = {} }, ref) => {
75
return <div ref={ref} id="inkeep-search" className={className} style={extraInputStyle}></div>;
86
},
97
);

0 commit comments

Comments
 (0)