Skip to content

Commit b9451f2

Browse files
BlargianBlargian
authored
Fix docs check
1 parent 359a496 commit b9451f2

File tree

1 file changed

+60
-100
lines changed

1 file changed

+60
-100
lines changed

‎src/components/DocsCategoryDropdown/index.jsx

Lines changed: 60 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import React, { useState, useRef, useEffect } from "react";
32
import { useHistory } from "react-router-dom";
43
import Link from "@docusaurus/Link";
@@ -43,13 +42,13 @@ function DocsCategoryDropdown({ dropdownCategory }) {
4342
} else {
4443
// Align to center
4544
left =
46-
triggerRect.left + triggerRect.width / 2 - dropdownRect.width / 2;
45+
triggerRect.left + triggerRect.width / 2 - dropdownRect.width / 2;
4746
}
4847

4948
// Ensure the dropdown doesn't go off-screen
5049
left = Math.max(
51-
10,
52-
Math.min(left, viewportWidth - dropdownRect.width - 10),
50+
10,
51+
Math.min(left, viewportWidth - dropdownRect.width - 10),
5352
);
5453

5554
setDropdownStyles({
@@ -68,69 +67,75 @@ function DocsCategoryDropdown({ dropdownCategory }) {
6867

6968
// Guard against undefined sidebar
7069
const isSelected =
71-
sidebar && sidebar.name && dropdownCategory
72-
? sidebar.name === dropdownCategory.customProps.sidebar
73-
: false;
70+
sidebar && sidebar.name && dropdownCategory
71+
? sidebar.name === dropdownCategory.customProps.sidebar
72+
: false;
7473

7574
return (
76-
<div
77-
className={styles.docsNavDropdownContainer}
78-
onMouseEnter={handleMouseEnter}
79-
onMouseLeave={handleMouseLeave}
80-
>
75+
<div
76+
className={styles.docsNavDropdownContainer}
77+
onMouseEnter={handleMouseEnter}
78+
onMouseLeave={handleMouseLeave}
79+
>
8180
<span
82-
className={styles.docsNavDropdownToolbarLink}
83-
ref={triggerRef} // Attach the ref to the individual link that triggers the dropdown
81+
className={styles.docsNavDropdownToolbarLink}
82+
ref={triggerRef} // Attach the ref to the individual link that triggers the dropdown
8483
>
8584
<Link
8685
className={`${styles.docsNavDropdownToolbarTopLevelLink} ${isSelected ? styles.docsNavSelected : ""
8786
}`}
8887
href={dropdownCategory.customProps.href}
8988
>
9089
<Translate
91-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
92-
description={`Translation for ${dropdownCategory.label}`}
90+
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
91+
description={`Translation for ${dropdownCategory.label}`}
9392
>
9493
{dropdownCategory.label}
9594
</Translate>
9695
</Link>{" "}
9796
<DropdownCaret />
9897
</span>
99-
{isOpen && (
100-
<DropdownContent
101-
dropdownCategory={dropdownCategory}
102-
handleMouseLeave={handleMouseLeave}
103-
dropdownStyles={dropdownStyles} // Pass the dynamic styles to position the dropdown
104-
dropdownMenuRef={dropdownMenuRef} // Pass the ref to the dropdown content
105-
/>
106-
)}
107-
</div>
98+
{isOpen && (
99+
<DropdownContent
100+
dropdownCategory={dropdownCategory}
101+
handleMouseLeave={handleMouseLeave}
102+
dropdownStyles={dropdownStyles} // Pass the dynamic styles to position the dropdown
103+
dropdownMenuRef={dropdownMenuRef} // Pass the ref to the dropdown content
104+
/>
105+
)}
106+
</div>
108107
);
109108
}
110109

111110
export const DocsCategoryDropdownLinkOnly = ({ title, link }) => {
112111
return (
113-
<div className={styles.docsNavDropdownContainer}>
114-
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}>
115-
<span>{title}</span>
116-
</Link>
117-
</div>
112+
<div className={styles.docsNavDropdownContainer}>
113+
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}>
114+
<span>{title}</span>
115+
</Link>
116+
</div>
118117
);
119118
};
120119

121120
const DropdownContent = ({
122-
dropdownCategory,
123-
handleMouseLeave,
124-
dropdownStyles,
125-
dropdownMenuRef,
126-
}) => {
121+
dropdownCategory,
122+
handleMouseLeave,
123+
dropdownStyles,
124+
dropdownMenuRef,
125+
}) => {
127126
const [hovered, setHovered] = useState(null);
128127

129128
return (
129+
<div
130+
ref={dropdownMenuRef}
131+
className={styles.docsNavDropdownMenu}
132+
style={{ position: "fixed", ...dropdownStyles }}
133+
>
130134
<div
131-
ref={dropdownMenuRef}
132-
className={styles.docsNavDropdownMenu}
133-
style={{ position: "fixed", ...dropdownStyles }}
135+
key={99}
136+
className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ""}`}
137+
onMouseEnter={() => setHovered(99)}
138+
onMouseLeave={() => setHovered(null)}
134139
>
135140
<Link
136141
to={dropdownCategory.customProps.href}
@@ -161,23 +166,11 @@ const DropdownContent = ({
161166
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ""}`}
162167
onMouseEnter={() => setHovered(index)}
163168
onMouseLeave={() => setHovered(null)}
164-
>
165-
<Link
166-
to={dropdownCategory.customProps.href}
167-
className={styles.docsNavMenuHeader}
168-
onClick={handleMouseLeave}
169169
>
170-
<Translate
171-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
172-
description={`Translation for ${dropdownCategory.label}`}
173-
>
174-
{dropdownCategory.label}
175-
</Translate>
176-
</Link>
177-
<div className={styles.docsNavMenuDescription}>
178-
<Translate
179-
id={`sidebar.dropdownCategories.category.description.${dropdownCategory.label}`}
180-
description={`Translation for ${dropdownCategory.label} description`}
170+
<Link
171+
to={item.href}
172+
className={styles.docsNavItemTitle}
173+
onClick={handleMouseLeave}
181174
>
182175
<Translate
183176
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}`}
@@ -197,42 +190,9 @@ const DropdownContent = ({
197190

198191
</div>
199192
</div>
200-
</div>
201-
<hr className={styles.docsNavMenuDivider} />
202-
<div className={styles.docsNavMenuItems}>
203-
{dropdownCategory.items.map((item, index) => (
204-
<div
205-
key={index}
206-
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ""}`}
207-
onMouseEnter={() => setHovered(index)}
208-
onMouseLeave={() => setHovered(null)}
209-
>
210-
<Link
211-
to={item.href}
212-
className={styles.docsNavItemTitle}
213-
onClick={handleMouseLeave}
214-
>
215-
<Translate
216-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}`}
217-
description={`Translation for ${dropdownCategory.label}.${item.label}`}
218-
>
219-
{item.label}
220-
</Translate>
221-
222-
</Link>
223-
<div className={styles.docsNavItemDescription}>
224-
<Translate
225-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}.description`}
226-
description={`Translation for ${dropdownCategory.label}.${item.label} description`}
227-
>
228-
{item.description}
229-
</Translate>
230-
231-
</div>
232-
</div>
233-
))}
234-
</div>
193+
))}
235194
</div>
195+
</div>
236196
);
237197
};
238198

@@ -251,20 +211,20 @@ const DropdownCaret = () => {
251211
};
252212

253213
return (
254-
<span style={{ marginLeft: "8px" }}>
214+
<span style={{ marginLeft: "8px" }}>
255215
<svg
256-
xmlns="http://www.w3.org/2000/svg"
257-
width="6"
258-
height="10"
259-
viewBox="0 0 6 10"
260-
style={rotatedIconStyle}
216+
xmlns="http://www.w3.org/2000/svg"
217+
width="6"
218+
height="10"
219+
viewBox="0 0 6 10"
220+
style={rotatedIconStyle}
261221
>
262222
<path
263-
stroke="currentColor"
264-
strokeLinecap="round"
265-
strokeLinejoin="round"
266-
strokeWidth="1.5"
267-
d="M1 9L5 5 1 1"
223+
stroke="currentColor"
224+
strokeLinecap="round"
225+
strokeLinejoin="round"
226+
strokeWidth="1.5"
227+
d="M1 9L5 5 1 1"
268228
/>
269229
</svg>
270230
</span>

0 commit comments

Comments
 (0)