- Used custom api dropdown for changing label dynamically. Used method discussed in [this post](https://github.com/facebook/docusaurus/pull/7231). `ComponentTypes` is ejected safely.  - Fixed dropdowns missing on chrome docs page  - Fixed `:has` selector compatibility problem on firefox. After (Screenshots from firefox):     Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/39 Co-authored-by: HesterG <hestergong@gmail.com> Co-committed-by: HesterG <hestergong@gmail.com>
24 lines
806 B
JavaScript
24 lines
806 B
JavaScript
import React from 'react';
|
|
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
|
|
import {useLocation} from '@docusaurus/router';
|
|
|
|
export default function APIDropDown(props) {
|
|
const {pathname} = useLocation();
|
|
let newLabel = props.label;
|
|
// isAPI indicates if the current page is a api page
|
|
let isAPI = false;
|
|
for (const item of props.items) {
|
|
// paths like /zh-cn/api/{version}/ are also api pages
|
|
if (pathname === item.to || pathname === `/zh-cn${item.to}`) {
|
|
if (!props.mobile) newLabel = item.label;
|
|
isAPI = true;
|
|
break;
|
|
}
|
|
}
|
|
const newProps = {...props, label: newLabel};
|
|
// Hide api dropdown on non api pages
|
|
return (
|
|
<DropdownNavbarItem {...newProps} className={`api-dropdown${isAPI? '': ' gt-hidden'}`}></DropdownNavbarItem>
|
|
);
|
|
}
|