forked from apache/doris-website
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Enhancement]:Optimize navbar (apache#1497)
1. Optimize navbar 2. Fixed the issue that the Community Page language switching function is lost. 3. Remove `技术论坛` 4. Fix the problem of missing url parameters. --------- Co-authored-by: liyang <liyang@selectdb.com>
- Loading branch information
Showing
8 changed files
with
282 additions
and
255 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { useThemeConfig } from '@docusaurus/theme-common'; | ||
| import { splitNavbarItems } from '@docusaurus/theme-common/internal'; | ||
| import NavbarLogo from '@theme/Navbar/Logo'; | ||
| import Link from '@docusaurus/Link'; | ||
| import Translate from '@docusaurus/Translate'; | ||
| import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem'; | ||
|
|
||
| import { NavbarItems } from '..'; | ||
| import styles from '../styles.module.css'; | ||
|
|
||
| function useNavbarItems() { | ||
| return useThemeConfig().navbar.items as NavbarItemConfig[]; | ||
| } | ||
|
|
||
| export const NavbarCommonLeft = () => { | ||
| const items = useNavbarItems(); | ||
| const [leftItems] = splitNavbarItems(items); | ||
|
|
||
| return ( | ||
| <div className={`navbar-left `}> | ||
| <div className="navbar-logo-wrapper flex items-center"> | ||
| <NavbarLogo /> | ||
| </div> | ||
| <div className={`${styles.navbarLeftToc}`}> | ||
| <NavbarItems items={leftItems} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| interface NavbarCommonRightProps { | ||
| star: string; | ||
| } | ||
|
|
||
| export const NavbarCommonRight = ({ star }: NavbarCommonRightProps) => { | ||
| const items = useNavbarItems(); | ||
| const [, rightItems] = splitNavbarItems(items); | ||
|
|
||
| return ( | ||
| <> | ||
| <NavbarItems items={rightItems} /> | ||
| <Link | ||
| className="github-btn desktop header-right-button-github" | ||
| href="https://github.com/apache/doris" | ||
| target="_blank" | ||
| > | ||
| {star && <div className="gh-count">{star}k</div>} | ||
| </Link> | ||
| <Link | ||
| className="slack-btn desktop header-right-button-slack" | ||
| href="https://join.slack.com/t/apachedoriscommunity/shared_invite/zt-2unfw3a3q-MtjGX4pAd8bCGC1UV0sKcw" | ||
| target="_blank" | ||
| ></Link> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React from 'react'; | ||
| import { useThemeConfig } from '@docusaurus/theme-common'; | ||
| import { splitNavbarItems } from '@docusaurus/theme-common/internal'; | ||
| import NavbarLogo from '@theme/Navbar/Logo'; | ||
| import { type Props as NavbarItemConfig } from '@theme/NavbarItem'; | ||
|
|
||
| import { getNavItem } from '..'; | ||
| import { NavbarItems } from '..'; | ||
| import LocaleDropdownNavbarItem from '../../../NavbarItem/LocaleDropdownNavbarItem'; | ||
| import styles from '../styles.module.css'; | ||
|
|
||
| function useNavbarItems() { | ||
| return useThemeConfig().communityNavbar.items as NavbarItemConfig[]; | ||
| } | ||
|
|
||
| export const NavbarCommunityLeft = () => { | ||
| const items = useNavbarItems(); | ||
| const [leftItems] = splitNavbarItems(items); | ||
| return ( | ||
| <div className={`navbar-left `}> | ||
| <div className="navbar-logo-wrapper flex items-center"> | ||
| <NavbarLogo /> | ||
| </div> | ||
| <div className={`${styles.navbarLeftToc}`}> | ||
| <NavbarItems items={leftItems} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const NavbarCommunityRight = () => { | ||
| const items = useNavbarItems(); | ||
| const [, rightItems] = splitNavbarItems(items); | ||
| return <NavbarItems items={rightItems} />; | ||
| }; | ||
|
|
||
| export const NavbarCommunityBottom = () => { | ||
| const items = useNavbarItems(); | ||
| return ( | ||
| <div className="docs-nav-version-locale"> | ||
| <LocaleDropdownNavbarItem mobile={false} {...getNavItem(items, 'localeDropdown')} /> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import styles from '../styles.module.css'; | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { useLocation } from '@docusaurus/router'; | ||
| import { useThemeConfig } from '@docusaurus/theme-common'; | ||
| import { splitNavbarItems } from '@docusaurus/theme-common/internal'; | ||
| import DocsLogoNew from '@site/static/images/doc-logo-new.svg'; | ||
| import DocsLogoZH from '@site/static/images/doc-logo-zh.svg'; | ||
| import LocaleDropdownNavbarItem from '../../../NavbarItem/LocaleDropdownNavbarItem'; | ||
| import DocsVersionDropdownNavbarItem from '../../../NavbarItem/DocsVersionDropdownNavbarItem'; | ||
| import { NavbarItems,getNavItem } from '..'; | ||
|
|
||
| interface NavbarDocsProps { | ||
| isEN: boolean; | ||
| } | ||
|
|
||
| export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) => { | ||
| const [currentVersion, setCurrentVersion] = useState(''); | ||
| const location = useLocation(); | ||
| const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items; | ||
| const [leftDocItems] = splitNavbarItems(docItems); | ||
| useEffect(() => { | ||
| const secPath = location.pathname.includes('zh-CN/docs') | ||
| ? location.pathname.split('/')[3] | ||
| : location.pathname.split('/')[2]; | ||
| if (location.pathname.includes('docs') && ['dev', '2.1', '2.0', '1.2'].includes(secPath)) { | ||
| setCurrentVersion(secPath); | ||
| } else { | ||
| setCurrentVersion(''); | ||
| } | ||
| }, [typeof window !== 'undefined' && location.pathname]); | ||
| return ( | ||
| <div className={`navbar-left `}> | ||
| <div className="navbar-logo-wrapper flex items-center"> | ||
| <div | ||
| className="cursor-pointer docs" | ||
| onClick={() => { | ||
| window.location.href = `${isEN ? '' : '/zh-CN'}/docs${ | ||
| currentVersion === '' ? '' : `/${currentVersion}` | ||
| }/gettingStarted/what-is-new`; | ||
| }} | ||
| > | ||
| {isEN ? <DocsLogoNew /> : <DocsLogoZH />} | ||
| </div> | ||
| </div> | ||
| <div className={`${styles.navbarLeftToc}`}> | ||
| <NavbarItems items={leftDocItems} isDocsPage={true} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const NavbarDocsRight = ({ isEN }: NavbarDocsProps) => { | ||
| const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items; | ||
| const [, rightDocItems] = splitNavbarItems(docItems); | ||
| return <NavbarItems items={rightDocItems} />; | ||
| }; | ||
|
|
||
| export const NavbarDocsBottom = ({ isEN }: NavbarDocsProps) => { | ||
| const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items; | ||
| 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" | ||
| {...(getNavItem(rightDocItems,'docsVersionDropdown') as any)} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.