This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new c3f3ce04f3d [fix] fix sidebar search box (#3651)
c3f3ce04f3d is described below
commit c3f3ce04f3d23518475cf31f5034d38fcb4ab1f2
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Fri May 15 00:30:15 2026 -0700
[fix] fix sidebar search box (#3651)
---
src/theme/DocItem/Layout/MobileSidebarDrawer.tsx | 16 +++++++++++-----
src/theme/DocSidebar/Desktop/styles.module.css | 17 +++++++++++++++++
2 files changed, 28 insertions(+), 5 deletions(-)
diff --git a/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
index 6afb0acf14f..a55cca9a745 100644
--- a/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
+++ b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
import clsx from 'clsx';
import { useLocation } from '@docusaurus/router';
import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
@@ -20,6 +20,7 @@ export default function MobileSidebarDrawer(): JSX.Element |
null {
const isZH = currentLocale === 'zh-CN';
const [open, setOpen] = useState(false);
const [localeOpen, setLocaleOpen] = useState(false);
+ const localeContainerRef = useRef<HTMLDivElement>(null);
const close = useCallback(() => setOpen(false), []);
@@ -45,7 +46,12 @@ export default function MobileSidebarDrawer(): JSX.Element |
null {
useEffect(() => {
if (!localeOpen) return undefined;
- const onDocClick = () => setLocaleOpen(false);
+ const onDocClick = (e: MouseEvent) => {
+ const container = localeContainerRef.current;
+ if (container && !container.contains(e.target as Node)) {
+ setLocaleOpen(false);
+ }
+ };
document.addEventListener('mousedown', onDocClick);
return () => document.removeEventListener('mousedown', onDocClick);
}, [localeOpen]);
@@ -59,8 +65,8 @@ export default function MobileSidebarDrawer(): JSX.Element |
null {
<SearchBar />
</div>
<div
+ ref={localeContainerRef}
className={clsx(styles.toolbarLocale, localeOpen &&
styles.toolbarLocaleOpen)}
- onMouseDown={e => e.stopPropagation()}
>
<button
type="button"
@@ -87,10 +93,10 @@ export default function MobileSidebarDrawer(): JSX.Element
| null {
</button>
<ul className={styles.localeMenu} role="menu">
{locales.map(locale => {
- const baseTo =
`pathname://${alternatePageUtils.createUrl({
+ const baseTo = alternatePageUtils.createUrl({
locale,
fullyQualified: false,
- })}`;
+ });
const to = `${baseTo}${search}${hash}`;
return (
<li key={locale} role="none">
diff --git a/src/theme/DocSidebar/Desktop/styles.module.css
b/src/theme/DocSidebar/Desktop/styles.module.css
index 23d0ada7b55..506fbe9f65e 100644
--- a/src/theme/DocSidebar/Desktop/styles.module.css
+++ b/src/theme/DocSidebar/Desktop/styles.module.css
@@ -59,6 +59,23 @@
height: 2.25rem !important;
}
+/* Anchor the autocomplete dropdown to the input's left edge instead of the
+ * navbar-default `left: -20%` rule that pulls the 560px-wide panel off the
+ * left side of the viewport when the search bar lives in the sidebar.
+ * The dropdown element is whatever autocomplete.js generates (a span/div),
+ * so match by class substring. */
+.sidebarSearch :global(.navbar__search) [class*="dropdownMenu"] {
+ left: 0 !important;
+ right: auto !important;
+}
+
+/* The Docusaurus sidebar container ships with `clip-path: inset(0)` (for the
+ * collapse animation), which also clips our 560px search dropdown to the
+ * 300px sidebar width. Disable it so the dropdown can overflow the sidebar. */
+:global(.theme-doc-sidebar-container) {
+ clip-path: none !important;
+}
+
.sidebarLocale {
flex: 0 0 auto;
display: flex;
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
