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 7867ca7d964 [opt] update search bar (#3650)
7867ca7d964 is described below
commit 7867ca7d96458337c35e9592aad66cbb12179205
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Thu May 14 22:48:53 2026 -0700
[opt] update search bar (#3650)
---
sidebars-next.ts | 66 ++++++--
src/components/home-next/NavbarNext.tsx | 78 +--------
src/hooks/use-is-doc.ts | 4 +-
src/theme/DocBreadcrumbs/index.tsx | 101 ++++++++++++
src/theme/DocBreadcrumbs/styles.module.css | 4 +
.../DocItem/Layout/MobileSidebarDrawer.module.css | 164 +++++++++++++++++++
src/theme/DocItem/Layout/MobileSidebarDrawer.tsx | 178 +++++++++++++++++++++
src/theme/DocItem/Layout/index.tsx | 2 +
src/theme/DocSidebar/Desktop/index.tsx | 10 ++
src/theme/DocSidebar/Desktop/styles.module.css | 50 ++++++
src/theme/DocSidebarItem/Category/index.tsx | 4 +-
src/theme/DocSidebarItem/Category/style.scss | 48 ++++--
src/theme/Layout/index.tsx | 2 -
src/theme/Navbar/Content/components/NavbarDocs.tsx | 24 +--
src/theme/Navbar/Content/index.tsx | 16 +-
15 files changed, 612 insertions(+), 139 deletions(-)
diff --git a/sidebars-next.ts b/sidebars-next.ts
index 43bc453f9e1..66c3a929342 100644
--- a/sidebars-next.ts
+++ b/sidebars-next.ts
@@ -2,6 +2,12 @@ import type { SidebarsConfig } from
'@docusaurus/plugin-content-docs';
const sidebars: SidebarsConfig = {
docs: [
+ {
+ type: 'category',
+ label: 'Get Started',
+ collapsible: false,
+ collapsed: false,
+ items: [
{
type: 'category',
label: 'Getting Started',
@@ -174,7 +180,15 @@ const sidebars: SidebarsConfig = {
],
},
],
+ },
+ ],
},
+ {
+ type: 'category',
+ label: 'Use Doris',
+ collapsible: false,
+ collapsed: false,
+ items: [
{
type: 'category',
label: 'Table Design',
@@ -712,6 +726,41 @@ const sidebars: SidebarsConfig = {
},
],
},
+ ],
+ },
+ {
+ type: 'category',
+ label: 'Solutions',
+ collapsible: false,
+ collapsed: false,
+ items: [
+ {
+ type: 'category',
+ label: 'Doris for AI',
+ link: {type: 'doc', id: 'ai/ai-overview'},
+ collapsed: true,
+ items: [
+ 'ai/ai-function-overview',
+ ],
+ },
+ {
+ type: 'category',
+ label: 'Observability with Doris',
+ link: {type: 'doc', id: 'observability/overview'},
+ collapsed: true,
+ items: [
+ 'observability/log',
+ 'observability/trace',
+ ],
+ },
+ ],
+ },
+ {
+ type: 'category',
+ label: 'Operate & Maintain',
+ collapsible: false,
+ collapsed: false,
+ items: [
{
type: 'category',
label: 'Administration',
@@ -2598,23 +2647,6 @@ const sidebars: SidebarsConfig = {
},
],
},
- {
- type: 'category',
- label: 'Doris for AI',
- link: {type: 'doc', id: 'ai/ai-overview'},
- collapsed: true,
- items: [
- 'ai/ai-function-overview',
- ],
- },
- {
- type: 'category',
- label: 'Observability with Doris',
- link: {type: 'doc', id: 'observability/overview'},
- collapsed: true,
- items: [
- 'observability/log',
- 'observability/trace',
],
},
],
diff --git a/src/components/home-next/NavbarNext.tsx
b/src/components/home-next/NavbarNext.tsx
index 1ee5471e9ec..0ff0e0c2883 100644
--- a/src/components/home-next/NavbarNext.tsx
+++ b/src/components/home-next/NavbarNext.tsx
@@ -1,9 +1,7 @@
import React, { JSX, useState, useEffect } from 'react';
import Link from '@docusaurus/Link';
-import { useLocation } from '@docusaurus/router';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
-import { getLocalePrefix, isDocsNextPath, isReleasesPath, normalizePathname }
from '@site/src/utils/locale';
+import { getLocalePrefix } from '@site/src/utils/locale';
import { STAR_COUNT } from '@site/src/constant/github.data';
import './NavbarNext.scss';
@@ -109,33 +107,15 @@ function MenuIcon({ open }: { open: boolean }):
JSX.Element {
export function NavbarNext(): JSX.Element {
const {
- i18n: { currentLocale, defaultLocale, localeConfigs },
+ i18n: { currentLocale, defaultLocale },
} = useDocusaurusContext();
- const { pathname, search, hash } = useLocation();
const [mobileOpen, setMobileOpen] = useState(false);
const localePrefix = getLocalePrefix(currentLocale, defaultLocale);
const docsHref =
`${localePrefix}/docs-next/dev/getting-started/what-is-apache-doris`;
const releasesHref = `${localePrefix}/releases/all-release`;
const navItems = buildNavItems(docsHref, releasesHref);
const [expandedMobileItem, setExpandedMobileItem] =
useState(navItems[0]?.label ?? '');
- const isDocsNextPage = isDocsNextPath(pathname, [defaultLocale, 'zh-CN']);
- const isReleasesPage = isReleasesPath(pathname, [defaultLocale, 'zh-CN']);
- const showLocaleSwitcher = isDocsNextPage || isReleasesPage;
const homeHref = `${getLocalePrefix(currentLocale, defaultLocale)}/`;
- const localeSwitchLabel = currentLocale === 'zh-CN' ?
localeConfigs[defaultLocale]?.label ?? 'English' : '中文';
- const currentLocalizedPath = normalizePathname(pathname, [defaultLocale,
'zh-CN']);
- const buildLocaleHref = (locale: string) =>
- `pathname://${locale === defaultLocale ? '' :
`/${locale}`}${currentLocalizedPath}${search}${hash}`;
- const localeItems = [defaultLocale, 'zh-CN']
- .filter((locale, index, arr) => arr.indexOf(locale) === index)
- .map(locale => ({
- label: localeConfigs[locale]?.label ?? locale,
- lang: localeConfigs[locale]?.htmlLang,
- to: buildLocaleHref(locale),
- target: '_self',
- autoAddBaseUrl: false,
- className: locale === currentLocale ? 'dropdown__link--active' :
'',
- }));
useEffect(() => {
if (!mobileOpen) return undefined;
@@ -186,33 +166,6 @@ export function NavbarNext(): JSX.Element {
</div>
<div className="navbar-next__actions">
- {showLocaleSwitcher && (
- <DropdownNavbarItem
- mobile={false}
- label={
- <>
- <svg
- className="icon-language
navbar-next__locale-icon"
- xmlns="http://www.w3.org/2000/svg";
- width="16"
- height="16"
- viewBox="0 0 16 16"
- fill="none"
- aria-hidden="true"
- >
- <path
- d="M7.75756 14.3L10.5816
6.91667H11.8759L14.7 14.3H13.4057L12.7501 12.4167H9.74113L9.06873
14.3H7.75756ZM10.1109 11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908
12.45L1.97498 11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302
7.14133C3.80165 6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111
5.00635 6.39711 5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571
7.61667C6.43519 7.12778 6.81621 6.62511 7.11879 6.1086 [...]
- fill="currentColor"
- />
- </svg>
- </>
- }
- items={localeItems}
- position="right"
- className="navbar-next__locale-dropdown"
- aria-label={localeSwitchLabel}
- />
- )}
<a
href={`https://github.com/${GITHUB_REPO}`}
target="_blank"
@@ -281,33 +234,6 @@ export function NavbarNext(): JSX.Element {
</div>
<div className="navbar-next__mobile-actions">
- {showLocaleSwitcher && (
- <DropdownNavbarItem
- mobile={false}
- label={
- <>
- <svg
- className="icon-language
navbar-next__locale-icon"
- xmlns="http://www.w3.org/2000/svg";
- width="16"
- height="16"
- viewBox="0 0 16 16"
- fill="none"
- aria-hidden="true"
- >
- <path
- d="M7.75756 14.3L10.5816
6.91667H11.8759L14.7 14.3H13.4057L12.7501 12.4167H9.74113L9.06873
14.3H7.75756ZM10.1109 11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908
12.45L1.97498 11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302
7.14133C3.80165 6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111
5.00635 6.39711 5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571
7.61667C6.43519 7.12778 6.81621 6.62511 7.11879 6.1086 [...]
- fill="currentColor"
- />
- </svg>
- </>
- }
- items={localeItems}
- position="right"
- className="navbar-next__locale-dropdown"
- aria-label={localeSwitchLabel}
- />
- )}
<a
href={`https://github.com/${GITHUB_REPO}`}
target="_blank"
diff --git a/src/hooks/use-is-doc.ts b/src/hooks/use-is-doc.ts
index bf990bab23d..6a92807a2fd 100644
--- a/src/hooks/use-is-doc.ts
+++ b/src/hooks/use-is-doc.ts
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { isDocsPath } from '@site/src/utils/locale';
+import { isDocsPath, isDocsNextPath } from '@site/src/utils/locale';
export default function useIsDocPage(defaultValue: boolean) {
const [isDocsPage, setIsDocsPage] = useState(defaultValue);
@@ -9,7 +9,7 @@ export default function useIsDocPage(defaultValue: boolean) {
} = useDocusaurusContext();
useEffect(() => {
if (typeof window !== 'undefined') {
- const docsPage = isDocsPath(location.pathname, locales);
+ const docsPage = isDocsPath(location.pathname, locales) ||
isDocsNextPath(location.pathname, locales);
setIsDocsPage(docsPage);
}
}, [locales, typeof window !== 'undefined' && location.pathname]);
diff --git a/src/theme/DocBreadcrumbs/index.tsx
b/src/theme/DocBreadcrumbs/index.tsx
new file mode 100644
index 00000000000..ffdc9a2f2d7
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/index.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import clsx from 'clsx';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useSidebarBreadcrumbs } from '@docusaurus/plugin-content-docs/client';
+import { useHomePageRoute } from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import { translate } from '@docusaurus/Translate';
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
+
+import styles from './styles.module.css';
+
+function BreadcrumbsItemLink({
+ children,
+ href,
+ isLast,
+}: {
+ children: React.ReactNode;
+ href: string | undefined;
+ isLast: boolean;
+}) {
+ const className = 'breadcrumbs__link';
+ if (isLast) {
+ return (
+ <span className={className} itemProp="name">
+ {children}
+ </span>
+ );
+ }
+ return href ? (
+ <Link className={className} href={href} itemProp="item">
+ <span itemProp="name">{children}</span>
+ </Link>
+ ) : (
+ <span className={className}>{children}</span>
+ );
+}
+
+function BreadcrumbsItem({
+ children,
+ active,
+ index,
+ addMicrodata,
+}: {
+ children: React.ReactNode;
+ active: boolean;
+ index: number;
+ addMicrodata: boolean;
+}) {
+ return (
+ <li
+ {...(addMicrodata && {
+ itemScope: true,
+ itemProp: 'itemListElement',
+ itemType: 'https://schema.org/ListItem',
+ })}
+ className={clsx('breadcrumbs__item', {
+ 'breadcrumbs__item--active': active,
+ })}
+ >
+ {children}
+ <meta itemProp="position" content={String(index + 1)} />
+ </li>
+ );
+}
+
+export default function DocBreadcrumbs(): JSX.Element | null {
+ const breadcrumbs = useSidebarBreadcrumbs();
+ const homePageRoute = useHomePageRoute();
+ if (!breadcrumbs) {
+ return null;
+ }
+ // Drop the top-level sidebar section group (e.g. "Get Started"),
+ // since it's a visual grouping and has no destination page.
+ const visibleBreadcrumbs = breadcrumbs.length > 1 ? breadcrumbs.slice(1) :
breadcrumbs;
+ return (
+ <nav
+ className={clsx(ThemeClassNames.docs.docBreadcrumbs,
styles.breadcrumbsContainer)}
+ aria-label={translate({
+ id: 'theme.docs.breadcrumbs.navAriaLabel',
+ message: 'Breadcrumbs',
+ description: 'The ARIA label for the breadcrumbs',
+ })}
+ >
+ <ul className="breadcrumbs" itemScope
itemType="https://schema.org/BreadcrumbList";>
+ {homePageRoute && <HomeBreadcrumbItem />}
+ {visibleBreadcrumbs.map((item, idx) => {
+ const isLast = idx === visibleBreadcrumbs.length - 1;
+ const href =
+ item.type === 'category' && (item as any).linkUnlisted
? undefined : (item as any).href;
+ return (
+ <BreadcrumbsItem key={idx} active={isLast} index={idx}
addMicrodata={!!href}>
+ <BreadcrumbsItemLink href={href} isLast={isLast}>
+ {item.label}
+ </BreadcrumbsItemLink>
+ </BreadcrumbsItem>
+ );
+ })}
+ </ul>
+ </nav>
+ );
+}
diff --git a/src/theme/DocBreadcrumbs/styles.module.css
b/src/theme/DocBreadcrumbs/styles.module.css
new file mode 100644
index 00000000000..72da4671a45
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/styles.module.css
@@ -0,0 +1,4 @@
+.breadcrumbsContainer {
+ --ifm-breadcrumb-size-multiplier: 0.8;
+ margin-bottom: 0.8rem;
+}
diff --git a/src/theme/DocItem/Layout/MobileSidebarDrawer.module.css
b/src/theme/DocItem/Layout/MobileSidebarDrawer.module.css
new file mode 100644
index 00000000000..6aa5a2ffaf5
--- /dev/null
+++ b/src/theme/DocItem/Layout/MobileSidebarDrawer.module.css
@@ -0,0 +1,164 @@
+.toolbar {
+ display: none;
+}
+
+@media (max-width: 996px) {
+ .toolbar {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
+ }
+}
+
+.toolbarSearch {
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.toolbarSearch :global(.navbar__search) {
+ margin-left: 0 !important;
+ width: 100%;
+}
+
+.toolbarSearch :global(.navbar__search-input) {
+ width: 100% !important;
+ height: 2.25rem !important;
+}
+
+.toolbarIconBtn {
+ flex: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ padding: 0;
+ border: 1px solid #dfe5f0;
+ border-radius: 4px;
+ background-color: #fff;
+ color: var(--global-colors-text-primary);
+ cursor: pointer;
+}
+
+.toolbarIconBtn:hover {
+ border-color: var(--ifm-color-primary);
+ color: var(--ifm-color-primary);
+}
+
+.toolbarIcon {
+ width: 1rem;
+ height: 1rem;
+ flex: none;
+}
+
+.toolbarLocale {
+ position: relative;
+ flex: none;
+}
+
+.localeMenu {
+ position: absolute;
+ top: calc(100% + 4px);
+ right: 0;
+ min-width: 7rem;
+ margin: 0;
+ padding: 0.375rem 0;
+ list-style: none;
+ background: #fff;
+ border: 1px solid #edf2fa;
+ border-radius: 6px;
+ box-shadow: 0 6px 20px rgba(6, 128, 95, 0.12);
+ display: none;
+ z-index: 100;
+}
+
+.toolbarLocaleOpen .localeMenu {
+ display: block;
+}
+
+.localeMenuItem {
+ display: block;
+ padding: 0.5rem 0.875rem;
+ color: #1d1d1d;
+ font-size: 0.875rem;
+ line-height: 1.4;
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+.localeMenuItem:hover {
+ background-color: #f7fafc;
+ color: #1d1d1d;
+ text-decoration: none;
+}
+
+.localeMenuItemActive,
+.localeMenuItemActive:hover {
+ color: var(--ifm-color-primary);
+}
+
+.backdrop {
+ position: fixed;
+ inset: 0;
+ background-color: rgba(0, 0, 0, 0.45);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.25s ease;
+ z-index: 1000;
+}
+
+.drawer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: min(320px, 85vw);
+ background-color: var(--global-colors-background, #fff);
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+ transform: translateX(-100%);
+ transition: transform 0.25s ease;
+ z-index: 1001;
+ display: flex;
+ flex-direction: column;
+}
+
+.open .backdrop {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+.open .drawer {
+ transform: translateX(0);
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 1.25rem;
+ border-bottom: 1px solid #edf2fa;
+ font-weight: 600;
+ font-size: 0.9375rem;
+}
+
+.close {
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.25rem;
+ color: var(--global-colors-text-primary);
+ line-height: 0;
+}
+
+.body {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0.5rem 0;
+}
+
+.menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
diff --git a/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
new file mode 100644
index 00000000000..6afb0acf14f
--- /dev/null
+++ b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
@@ -0,0 +1,178 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import clsx from 'clsx';
+import { useLocation } from '@docusaurus/router';
+import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import SearchBar from '@theme/SearchBar';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+import styles from './MobileSidebarDrawer.module.css';
+
+export default function MobileSidebarDrawer(): JSX.Element | null {
+ const sidebar = useDocsSidebar();
+ const { pathname, search, hash } = useLocation();
+ const {
+ i18n: { currentLocale, locales, localeConfigs },
+ } = useDocusaurusContext();
+ const alternatePageUtils = useAlternatePageUtils();
+ const isZH = currentLocale === 'zh-CN';
+ const [open, setOpen] = useState(false);
+ const [localeOpen, setLocaleOpen] = useState(false);
+
+ const close = useCallback(() => setOpen(false), []);
+
+ useEffect(() => {
+ if (!open) return undefined;
+ const { style } = document.body;
+ const previous = style.overflow;
+ style.overflow = 'hidden';
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') setOpen(false);
+ };
+ window.addEventListener('keydown', onKey);
+ return () => {
+ style.overflow = previous;
+ window.removeEventListener('keydown', onKey);
+ };
+ }, [open]);
+
+ useEffect(() => {
+ setOpen(false);
+ setLocaleOpen(false);
+ }, [pathname]);
+
+ useEffect(() => {
+ if (!localeOpen) return undefined;
+ const onDocClick = () => setLocaleOpen(false);
+ document.addEventListener('mousedown', onDocClick);
+ return () => document.removeEventListener('mousedown', onDocClick);
+ }, [localeOpen]);
+
+ if (!sidebar) return null;
+
+ return (
+ <>
+ <div className={styles.toolbar}>
+ <div className={styles.toolbarSearch}>
+ <SearchBar />
+ </div>
+ <div
+ className={clsx(styles.toolbarLocale, localeOpen &&
styles.toolbarLocaleOpen)}
+ onMouseDown={e => e.stopPropagation()}
+ >
+ <button
+ type="button"
+ className={styles.toolbarIconBtn}
+ onClick={() => setLocaleOpen(o => !o)}
+ aria-label={isZH ? '切换语言' : 'Switch language'}
+ aria-haspopup="true"
+ aria-expanded={localeOpen}
+ >
+ <svg
+ className={styles.toolbarIcon}
+ xmlns="http://www.w3.org/2000/svg";
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ fill="none"
+ aria-hidden="true"
+ >
+ <path
+ d="M7.75756 14.3L10.5816 6.91667H11.8759L14.7
14.3H13.4057L12.7501 12.4167H9.74113L9.06873 14.3H7.75756ZM10.1109
11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908 12.45L1.97498
11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302 7.14133C3.80165
6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111 5.00635 6.39711
5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571 7.61667C6.43519 7.12778
6.81621 6.62511 7.11879 6.10867C7.42137 5. [...]
+ fill="currentColor"
+ />
+ </svg>
+ </button>
+ <ul className={styles.localeMenu} role="menu">
+ {locales.map(locale => {
+ const baseTo =
`pathname://${alternatePageUtils.createUrl({
+ locale,
+ fullyQualified: false,
+ })}`;
+ const to = `${baseTo}${search}${hash}`;
+ return (
+ <li key={locale} role="none">
+ <a
+ role="menuitem"
+ href={to}
+ lang={localeConfigs[locale]?.htmlLang}
+ className={clsx(
+ styles.localeMenuItem,
+ locale === currentLocale &&
styles.localeMenuItemActive,
+ )}
+ >
+ {localeConfigs[locale]?.label ??
locale}
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ <button
+ type="button"
+ className={styles.toolbarIconBtn}
+ onClick={() => setOpen(true)}
+ aria-label={isZH ? '打开文档目录' : 'Open docs sidebar'}
+ aria-expanded={open}
+ >
+ <svg className={styles.toolbarIcon} viewBox="0 0 16 16"
fill="none" aria-hidden="true">
+ <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor"
strokeWidth="1.5" strokeLinecap="round" />
+ </svg>
+ </button>
+ </div>
+
+ <div className={clsx(open && styles.open)} aria-hidden={!open}>
+ <div
+ className={styles.backdrop}
+ onClick={close}
+ role="presentation"
+ />
+ <aside
+ className={styles.drawer}
+ aria-label={isZH ? '文档目录' : 'Docs sidebar'}
+ >
+ <div className={styles.header}>
+ <span>{isZH ? '目录' : 'Menu'}</span>
+ <button
+ type="button"
+ className={styles.close}
+ onClick={close}
+ aria-label={isZH ? '关闭目录' : 'Close docs sidebar'}
+ >
+ <svg width="20" height="20" viewBox="0 0 20 20"
fill="none" aria-hidden="true">
+ <path
+ d="M5 5l10 10M15 5L5 15"
+ stroke="currentColor"
+ strokeWidth="1.6"
+ strokeLinecap="round"
+ />
+ </svg>
+ </button>
+ </div>
+ <nav
+ className={styles.body}
+ aria-label={isZH ? '文档目录导航' : 'Docs sidebar
navigation'}
+ >
+ <ul
className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list',
styles.menu)}>
+ <DocSidebarItems
+ items={sidebar.items}
+ activePath={pathname}
+ onItemClick={(item) => {
+ if (item.type === 'link') {
+ close();
+ }
+ if (item.type === 'category' && item.href)
{
+ close();
+ }
+ }}
+ level={1}
+ />
+ </ul>
+ </nav>
+ </aside>
+ </div>
+ </>
+ );
+}
diff --git a/src/theme/DocItem/Layout/index.tsx
b/src/theme/DocItem/Layout/index.tsx
index f58dea3d678..546ec86e702 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -16,6 +16,7 @@ import DocBreadcrumbs from '@theme/DocBreadcrumbs';
import ContentVisibility from '@theme/ContentVisibility';
import type { Props } from '@theme/DocItem/Layout';
import { DocsEdit } from '../../../components/Icons/docs-edit';
+import MobileSidebarDrawer from './MobileSidebarDrawer';
import styles from './styles.module.css';
@@ -68,6 +69,7 @@ export default function DocItemLayout({ children }: Props):
JSX.Element {
<DocVersionBanner />
<div className={styles.docItemContainer}>
<article>
+ <MobileSidebarDrawer />
<DocBreadcrumbs />
{/* <DocVersionBadge /> */}
{docTOC.mobile}
diff --git a/src/theme/DocSidebar/Desktop/index.tsx
b/src/theme/DocSidebar/Desktop/index.tsx
index 9446ba23345..315004a57b4 100644
--- a/src/theme/DocSidebar/Desktop/index.tsx
+++ b/src/theme/DocSidebar/Desktop/index.tsx
@@ -2,6 +2,8 @@ import React from 'react';
import clsx from 'clsx';
import {useThemeConfig} from '@docusaurus/theme-common';
import Logo from '@theme/Logo';
+import SearchBar from '@theme/SearchBar';
+import LocaleDropdownNavbarItem from
'@theme/NavbarItem/LocaleDropdownNavbarItem';
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
import Content from '@theme/DocSidebar/Desktop/Content';
import type {Props} from '@theme/DocSidebar/Desktop';
@@ -24,6 +26,14 @@ function DocSidebarDesktop({path, sidebar, onCollapse,
isHidden}: Props) {
isHidden && styles.sidebarHidden,
)}>
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+ <div className={styles.sidebarHeader}>
+ <div className={styles.sidebarSearch}>
+ <SearchBar />
+ </div>
+ <div className={styles.sidebarLocale}>
+ <LocaleDropdownNavbarItem mobile={false} {...({} as any)} />
+ </div>
+ </div>
<Content path={path} sidebar={sidebar} />
{hideable && <CollapseButton onClick={onCollapse} />}
</div>
diff --git a/src/theme/DocSidebar/Desktop/styles.module.css
b/src/theme/DocSidebar/Desktop/styles.module.css
index c5d5e50e16f..23d0ada7b55 100644
--- a/src/theme/DocSidebar/Desktop/styles.module.css
+++ b/src/theme/DocSidebar/Desktop/styles.module.css
@@ -35,3 +35,53 @@
.sidebarLogo {
display: none;
}
+
+.sidebarHeader {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem 0.5rem;
+ border-bottom: 1px solid #edf2fa;
+}
+
+.sidebarSearch {
+ flex: 1 1 auto;
+ min-width: 0;
+}
+
+.sidebarSearch :global(.navbar__search) {
+ margin-left: 0 !important;
+ width: 100%;
+}
+
+.sidebarSearch :global(.navbar__search-input) {
+ width: 100% !important;
+ height: 2.25rem !important;
+}
+
+.sidebarLocale {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+}
+
+.sidebarLocale :global(.navbar__item.dropdown) {
+ padding: 0 !important;
+}
+
+.sidebarLocale :global(.navbar__link) {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.4rem 0.55rem;
+ border: 1px solid #dfe5f0;
+ border-radius: 4px;
+ line-height: 1;
+}
+
+.sidebarLocale :global(.navbar__link):hover {
+ border-color: #8592a6;
+}
+
+.sidebarLocale :global(.navbar__link)::after {
+ display: none;
+}
diff --git a/src/theme/DocSidebarItem/Category/index.tsx
b/src/theme/DocSidebarItem/Category/index.tsx
index 33390a4dd32..e0dcd6a93d4 100644
--- a/src/theme/DocSidebarItem/Category/index.tsx
+++ b/src/theme/DocSidebarItem/Category/index.tsx
@@ -164,7 +164,9 @@ export default function DocSidebarItemCategory({
})}
>
{level === 1 && isDocsPage ? (
- <p className={clsx('title_level_1')}>{label}</p>
+ <p className={clsx('title_level_1')}>
+ <span className="title_level_1__label">{label}</span>
+ </p>
) : (
<>
<Link
diff --git a/src/theme/DocSidebarItem/Category/style.scss
b/src/theme/DocSidebarItem/Category/style.scss
index 5237ca902d7..03297d52123 100644
--- a/src/theme/DocSidebarItem/Category/style.scss
+++ b/src/theme/DocSidebarItem/Category/style.scss
@@ -13,8 +13,9 @@
// color: #4c576c;
// font-size: 14px;
font-weight: 400;
+ border-radius: 4px;
&:hover {
- background-color: #F7FFFB !important;
+ background-color: #F2F4F7 !important;
}
&:after {
right: 0;
@@ -22,6 +23,25 @@
}
}
}
+
+ /* Top-level (section group) collapsible items in section 01..04 */
+ .menu__list_level_2 > .menu__list-item > .menu__list-item-collapsible {
+ position: relative;
+ > .menu__link--sublist {
+ font-size: var(--global-font-size-medium, 14px);
+ font-weight: 400;
+ color: #1F1F26 !important;
+ }
+ /* Active state for a category whose descendant is the current page */
+ > .menu__link--sublist.menu__link--active {
+ font-weight: 400 !important;
+ color: var(--ifm-color-primary) !important;
+ background-color: transparent !important;
+ &:hover {
+ background-color: #F2F4F7 !important;
+ }
+ }
+ }
#menu__group:hover {
background-color: white !important;
}
@@ -30,19 +50,23 @@
}
.title_level_1 {
- color: #00000a;
- text-align: center;
- font-size: 14px;
+ color: #0D0D12;
+ font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 20px;
- letter-spacing: 0.56px;
- text-transform: capitalize;
+ letter-spacing: 0.4px;
display: flex;
- padding: 0px 10px 12px 10px;
- align-items: center;
- gap: 4px;
+ padding: 20px 10px 12px 10px;
+ align-items: baseline;
+ gap: 8px;
align-self: stretch;
+ margin: 0;
+ }
+
+ .title_level_1__label {
+ font-weight: 600;
+ color: #0D0D12;
}
@media (max-width: 996px) {
@@ -64,8 +88,10 @@
.divider {
width: calc(100% - 0.625rem);
- border: 0.5px solid #DFE5F0;
- margin: 1rem 0 1rem 0;
+ height: 1px;
+ border: 0;
+ background-color: #E5E8EE;
+ margin: 20px 0 4px 0;
position: relative;
left: 0.625rem;
}
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index 8d10f8762fa..2aa123c2558 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -18,7 +18,6 @@ import styles from './styles.module.css';
import { useHistory } from '@docusaurus/router';
import { NavbarNext } from '@site/src/components/home-next/NavbarNext';
import { PreviewBanner } from '@site/src/components/home-next/PreviewBanner';
-import { DocsSearchSection } from
'@site/src/components/home-next/DocsSearchSection';
import { isDocsNextPath, isReleasesPath, isEventsPath } from
'@site/src/utils/locale';
interface DataType {
showSearchPageMobile: boolean;
@@ -93,7 +92,6 @@ export default function Layout(props: Props): JSX.Element {
<AnnouncementBar />
{useNextNavbar && <PreviewBanner />}
{useNextNavbar ? <NavbarNext /> : <Navbar />}
- {isDocsNextPage && <DocsSearchSection />}
{!useNextNavbar && showSearchPageMobile ? (
<div ref={searchPageDom}>
<NavbarSearch>
diff --git a/src/theme/Navbar/Content/components/NavbarDocs.tsx
b/src/theme/Navbar/Content/components/NavbarDocs.tsx
index cef353f1045..e16ce398fd3 100644
--- a/src/theme/Navbar/Content/components/NavbarDocs.tsx
+++ b/src/theme/Navbar/Content/components/NavbarDocs.tsx
@@ -46,11 +46,7 @@ export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) =>
{
: currentLocale === 'ja' && themeConfig.docNavbarJA
? themeConfig.docNavbarJA.items
: themeConfig.docNavbarEN.items;
- let [leftDocItems] = splitNavbarItems(docItems);
- if(location.pathname.includes(ARCHIVE_PATH)){
- leftDocItems = leftDocItems.filter((item)=>item.type !== 'search')
- }
- const searchItem = getNavItem(leftDocItems, 'search');
+ const [leftDocItems] = splitNavbarItems(docItems);
const leftDocItemsWithoutSearch = leftDocItems.filter((item) => item.type
!== 'search');
const currentVersion = getDocsVersion(location.pathname, locales);
const docsHomeHref = `${getLocalePrefix(currentLocale,
defaultLocale)}/docs/${currentVersion}/gettingStarted/what-is-apache-doris`;
@@ -63,18 +59,6 @@ export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) =>
{
</div>
<div className={`${styles.navbarLeftToc}`}>
<NavbarItems items={leftDocItemsWithoutSearch}
isDocsPage={true} />
- {searchItem && (
- <div className="docs-search-container">
- <NavbarItems items={[searchItem]} isDocsPage={true} />
- <button
- className="navbar-ask-ai-btn rounded-full flex
items-center gap-x-2 px-4 py-[5px] border border-primary bg-[#F0FFF7]
text-[1rem]/[1.625rem] font-medium text-[#1D1D1D]"
- id="navbar-ask-ai-btn"
- >
- <StarGreenIcon />
- Ask AI
- </button>
- </div>
- )}
</div>
</div>
);
@@ -92,6 +76,7 @@ export const NavbarDocsRight = ({ isEN }: NavbarDocsProps) =>
{
? themeConfig.docNavbarJA.items
: themeConfig.docNavbarEN.items;
const [, rightDocItems] = splitNavbarItems(docItems);
+ const rightDocItemsWithoutLocale = rightDocItems.filter(item => item.type
!== 'localeDropdown');
const { showSearchPageMobile, setShowSearchPageMobile } =
useContext(DataContext);
const mobileSidebar = useNavbarMobileSidebar();
@@ -108,7 +93,7 @@ export const NavbarDocsRight = ({ isEN }: NavbarDocsProps)
=> {
<SearchIcon />
</span>
) : null}
- <NavbarItems items={[...rightDocItems]} />
+ <NavbarItems items={[...rightDocItemsWithoutLocale]} />
</>
)}
</>
@@ -129,9 +114,6 @@ export const NavbarDocsBottom = ({ isEN }: NavbarDocsProps)
=> {
const [, rightDocItems] = splitNavbarItems(docItems);
return (
<div className="docs-nav-version-locale">
- {/* getNavItem? */}
-
- <LocaleDropdownNavbarItem mobile={false}
{...(getNavItem(rightDocItems, 'localeDropdown') as any)} />
<DocsVersionDropdownNavbarItem
mobile={false}
docsPluginId="default"
diff --git a/src/theme/Navbar/Content/index.tsx
b/src/theme/Navbar/Content/index.tsx
index 0a3a3a8f7d4..b60267f2b3d 100644
--- a/src/theme/Navbar/Content/index.tsx
+++ b/src/theme/Navbar/Content/index.tsx
@@ -114,15 +114,13 @@ export default function NavbarContent(): ReactNode {
left={NavbarTypes[currentNavbar].left}
right={
<>
- {currentNavbar !== NavBar.DOCS && (
- <button
- className="navbar-ask-ai-btn rounded-full flex
items-center gap-x-2 px-4 py-[5px] border border-primary bg-[#F0FFF7]
text-[1rem]/[1.625rem] font-medium text-[#1D1D1D]"
- id="navbar-ask-ai-btn"
- >
- <StarGreenIcon />
- Ask AI
- </button>
- )}
+ <button
+ className="navbar-ask-ai-btn rounded-full flex
items-center gap-x-2 px-4 py-[5px] border border-primary bg-[#F0FFF7]
text-[1rem]/[1.625rem] font-medium text-[#1D1D1D]"
+ id="navbar-ask-ai-btn"
+ >
+ <StarGreenIcon />
+ Ask AI
+ </button>
{NavbarTypes[currentNavbar].right}
{!mobileSidebar.disabled && !showSearchPageMobile &&
<NavbarMobileSidebarToggle />}
<NavbarColorModeToggle className={styles.colorModeToggle}
/>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
