Use custom api dropdown and fix compatibility for firefox (#39)

- 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.

  ![Screen Shot 2023-07-05 at 16.21.43](/attachments/b4bc8ae4-6a8a-406c-98b7-f739b13c32ba)

- Fixed dropdowns missing on chrome docs page

  ![Screen Shot 2023-07-05 at 16.44.08](/attachments/1e5315b4-a057-4325-990f-1cbc35fb475f)

-  Fixed `:has` selector compatibility problem on firefox. After (Screenshots from firefox):

  ![Screen Shot 2023-07-05 at 16.10.23](/attachments/76475fb6-fd58-42ec-b4be-6a774553a887)

  ![Screen Shot 2023-07-05 at 16.10.35](/attachments/956f623a-afdb-4ab4-8aa2-beb9420727fb)

  ![Screen Shot 2023-07-05 at 16.15.35](/attachments/af840f31-def4-4f72-8340-f29b72a748bd)

  ![Screen Shot 2023-07-05 at 16.09.30](/attachments/42fa2394-962d-4594-8ef3-c594d3c1e777)

Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/39
Co-authored-by: HesterG <hestergong@gmail.com>
Co-committed-by: HesterG <hestergong@gmail.com>

src/components/APIDropDown.js

@@ -0,0 +1,23 @@
+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>
+  );
+}