Skip to content

Commit 7044979

Browse files
alexey-milovidovalexey-milovidov
authored
Merge pull request #4192 from ClickHouse/revert-4189-usability_improvements_menu
Revert "Styling: usability improvements to navbar"
2 parents 5595db6 + 814eee3 commit 7044979

File tree

2 files changed

+124
-166
lines changed

2 files changed

+124
-166
lines changed

‎src/components/DocsCategoryDropdown/index.jsx‎

Lines changed: 110 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,19 @@ import styles from "./styles.module.css";
1010

1111
function DocsCategoryDropdown({ dropdownCategory }) {
1212
const [isOpen, setIsOpen] = useState(false);
13-
const [isVisible, setIsVisible] = useState(false);
1413
const [dropdownStyles, setDropdownStyles] = useState({
1514
top: "0px",
1615
left: "0px",
1716
});
1817
const dropdownMenuRef = useRef(null);
1918
const triggerRef = useRef(null); // Reference for the individual menu item trigger
20-
const hideTimeoutRef = useRef(null);
2119

2220
const handleMouseEnter = () => {
23-
if (hideTimeoutRef.current) {
24-
clearTimeout(hideTimeoutRef.current);
25-
hideTimeoutRef.current = null;
26-
}
2721
setIsOpen(true);
28-
setTimeout(() => setIsVisible(true), 10);
2922
};
3023

3124
const handleMouseLeave = () => {
32-
setIsVisible(false);
33-
hideTimeoutRef.current = setTimeout(() => {
34-
setIsOpen(false);
35-
}, 150);
25+
setIsOpen(false);
3626
};
3727

3828
// Use useEffect to update the dropdown position when isOpen changes
@@ -52,17 +42,17 @@ function DocsCategoryDropdown({ dropdownCategory }) {
5242
} else {
5343
// Align to center
5444
left =
55-
triggerRect.left + triggerRect.width / 2 - dropdownRect.width / 2;
45+
triggerRect.left + triggerRect.width / 2 - dropdownRect.width / 2;
5646
}
5747

5848
// Ensure the dropdown doesn't go off-screen
5949
left = Math.max(
60-
10,
61-
Math.min(left, viewportWidth - dropdownRect.width - 10),
50+
10,
51+
Math.min(left, viewportWidth - dropdownRect.width - 10),
6252
);
6353

6454
setDropdownStyles({
65-
top: `${triggerRect.bottom}px`, // Back to original positioning
55+
top: `${triggerRect.bottom}px`, // Align the dropdown below the menu item
6656
left: `${left}px`, // Align the dropdown with the menu item
6757
});
6858
}
@@ -77,130 +67,132 @@ function DocsCategoryDropdown({ dropdownCategory }) {
7767

7868
// Guard against undefined sidebar
7969
const isSelected =
80-
sidebar && sidebar.name && dropdownCategory
81-
? sidebar.name === dropdownCategory.customProps.sidebar
82-
: false;
70+
sidebar && sidebar.name && dropdownCategory
71+
? sidebar.name === dropdownCategory.customProps.sidebar
72+
: false;
8373

8474
return (
85-
<div
86-
className={styles.docsNavDropdownContainer}
87-
onMouseEnter={handleMouseEnter}
88-
onMouseLeave={handleMouseLeave}
89-
>
75+
<div
76+
className={styles.docsNavDropdownContainer}
77+
onMouseEnter={handleMouseEnter}
78+
onMouseLeave={handleMouseLeave}
79+
>
9080
<span
91-
className={styles.docsNavDropdownToolbarLink}
92-
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
9383
>
9484
<Link
95-
className={`${styles.docsNavDropdownToolbarTopLevelLink} ${isSelected ? styles.docsNavSelected : ""
85+
className={`${styles.docsNavDropdownToolbarTopLevelLink} ${isSelected ? styles.docsNavSelected : ""
9686
}`}
97-
href={dropdownCategory.customProps.href}
87+
href={dropdownCategory.customProps.href}
9888
>
9989
<Translate
100-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
101-
description={`Translation for ${dropdownCategory.label}`}
90+
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
91+
description={`Translation for ${dropdownCategory.label}`}
10292
>
10393
{dropdownCategory.label}
10494
</Translate>
10595
</Link>{" "}
10696
<DropdownCaret />
10797
</span>
108-
{isOpen && (
109-
<DropdownContent
110-
dropdownCategory={dropdownCategory}
111-
handleMouseLeave={handleMouseLeave}
112-
dropdownStyles={dropdownStyles} // Pass the dynamic styles to position the dropdown
113-
dropdownMenuRef={dropdownMenuRef} // Pass the ref to the dropdown content
114-
isVisible={isVisible}
115-
/>
116-
)}
117-
</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>
118107
);
119108
}
120109

121110
export const DocsCategoryDropdownLinkOnly = ({ title, link }) => {
122111
return (
123-
<div className={styles.docsNavDropdownContainer}>
124-
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}>
125-
<span>{title}</span>
126-
</Link>
127-
</div>
112+
<div className={styles.docsNavDropdownContainer}>
113+
<Link href={link} className={styles.docsNavDropdownToolbarTopLevelLink}>
114+
<span>{title}</span>
115+
</Link>
116+
</div>
128117
);
129118
};
130119

131120
const DropdownContent = ({
132-
dropdownCategory,
133-
handleMouseLeave,
134-
dropdownStyles,
135-
dropdownMenuRef,
136-
isVisible,
137-
}) => {
121+
dropdownCategory,
122+
handleMouseLeave,
123+
dropdownStyles,
124+
dropdownMenuRef,
125+
}) => {
138126
const [hovered, setHovered] = useState(null);
139127

140128
return (
129+
<div
130+
ref={dropdownMenuRef}
131+
className={styles.docsNavDropdownMenu}
132+
style={{ position: "fixed", ...dropdownStyles }}
133+
>
141134
<div
142-
ref={dropdownMenuRef}
143-
className={`${styles.docsNavDropdownMenu} ${isVisible ? styles.visible : ''}`}
144-
style={{ position: "fixed", ...dropdownStyles }}
135+
key={99}
136+
className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ""}`}
137+
onMouseEnter={() => setHovered(99)}
138+
onMouseLeave={() => setHovered(null)}
145139
>
146140
<Link
147-
key={99}
148-
to={dropdownCategory.customProps.href}
149-
className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ""}`}
150-
onMouseEnter={() => setHovered(99)}
151-
onMouseLeave={() => setHovered(null)}
152-
onClick={handleMouseLeave}
153-
style={{ textDecoration: 'none', display: 'block' }}
141+
to={dropdownCategory.customProps.href}
142+
className={styles.docsNavMenuHeader}
143+
onClick={handleMouseLeave}
154144
>
155-
<div className={styles.docsNavMenuHeader}>
156-
<Translate
157-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
158-
description={`Translation for ${dropdownCategory.label}`}
159-
>
160-
{dropdownCategory.label}
161-
</Translate>
162-
</div>
163-
<div className={styles.docsNavMenuDescription}>
164-
<Translate
165-
id={`sidebar.dropdownCategories.category.description.${dropdownCategory.label}`}
166-
description={`Translation for ${dropdownCategory.label} description`}
167-
>
168-
{dropdownCategory.description}
169-
</Translate>
170-
</div>
145+
<Translate
146+
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
147+
description={`Translation for ${dropdownCategory.label}`}
148+
>
149+
{dropdownCategory.label}
150+
</Translate>
171151
</Link>
172-
<hr className={styles.docsNavMenuDivider} />
173-
<div className={styles.docsNavMenuItems}>
174-
{dropdownCategory.items.map((item, index) => (
175-
<Link
176-
key={index}
177-
to={item.href}
178-
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ""}`}
179-
onMouseEnter={() => setHovered(index)}
180-
onMouseLeave={() => setHovered(null)}
181-
onClick={handleMouseLeave}
182-
style={{ textDecoration: 'none', display: 'block' }}
183-
>
184-
<div className={styles.docsNavItemTitle}>
185-
<Translate
186-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}`}
187-
description={`Translation for ${dropdownCategory.label}.${item.label}`}
188-
>
189-
{item.label}
190-
</Translate>
191-
</div>
192-
<div className={styles.docsNavItemDescription}>
193-
<Translate
194-
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}.description`}
195-
description={`Translation for ${dropdownCategory.label}.${item.label} description`}
196-
>
197-
{item.description}
198-
</Translate>
199-
</div>
200-
</Link>
201-
))}
152+
<div className={styles.docsNavMenuDescription}>
153+
<Translate
154+
id={`sidebar.dropdownCategories.category.description.${dropdownCategory.label}`}
155+
description={`Translation for ${dropdownCategory.label} description`}
156+
>
157+
{dropdownCategory.description}
158+
</Translate>
202159
</div>
203160
</div>
161+
<hr className={styles.docsNavMenuDivider} />
162+
<div className={styles.docsNavMenuItems}>
163+
{dropdownCategory.items.map((item, index) => (
164+
<div
165+
key={index}
166+
className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ""}`}
167+
onMouseEnter={() => setHovered(index)}
168+
onMouseLeave={() => setHovered(null)}
169+
>
170+
<Link
171+
to={item.href}
172+
className={styles.docsNavItemTitle}
173+
onClick={handleMouseLeave}
174+
>
175+
<Translate
176+
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}`}
177+
description={`Translation for ${dropdownCategory.label}.${item.label}`}
178+
>
179+
{item.label}
180+
</Translate>
181+
182+
</Link>
183+
<div className={styles.docsNavItemDescription}>
184+
<Translate
185+
id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}.description`}
186+
description={`Translation for ${dropdownCategory.label}.${item.label} description`}
187+
>
188+
{item.description}
189+
</Translate>
190+
191+
</div>
192+
</div>
193+
))}
194+
</div>
195+
</div>
204196
);
205197
};
206198

@@ -219,24 +211,24 @@ const DropdownCaret = () => {
219211
};
220212

221213
return (
222-
<span style={{ marginLeft: "8px" }}>
214+
<span style={{ marginLeft: "8px" }}>
223215
<svg
224-
xmlns="http://www.w3.org/2000/svg"
225-
width="6"
226-
height="10"
227-
viewBox="0 0 6 10"
228-
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}
229221
>
230222
<path
231-
stroke="currentColor"
232-
strokeLinecap="round"
233-
strokeLinejoin="round"
234-
strokeWidth="1.5"
235-
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"
236228
/>
237229
</svg>
238230
</span>
239231
);
240232
};
241233

242-
export default DocsCategoryDropdown;
234+
export default DocsCategoryDropdown;

0 commit comments

Comments
 (0)