feat: docsVersionDropdown

docusaurus.config.js

@@ -97,10 +97,10 @@ const config = {
             label: '更新日志',
           },                
           // Please keep GitHub link to the right for consistency.
-          {
-            type: 'docsVersionDropdown',
-            position: 'right',
-          },        
+          // {
+          //   type: 'docsVersionDropdown',
+          //   position: 'right',
+          // },        
           {
             type: 'localeDropdown',
             position: 'right',            

src/components/SelectNav/index.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useHistory, useLocation } from '@docusaurus/router';
+import styles from './styles.module.css';
+import versionsList from '@site/versions.json'
+
+export default function SelectNav({ label, items }) {
+  let history = useHistory();
+  let pathname = useLocation().pathname;
+  let cur = pathname.replace('/docs/', '').split('/')[0]
+  let flag = cur === 'next' || versionsList.includes(cur)
+  let pagePath = flag ? pathname.replace(`/docs/${cur}`, '') : pathname.replace('/docs', '')
+  // console.log('----', pathname.replace('/docs/', '').split('/')[0], flag, pagePath)
+  const [selectedOption, setSelectedOption] = flag ? useState(cur === 'next' ? 'Next' : cur) : useState(items[1].label);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  const handleClick = item => {
+    setSelectedOption(item.label)
+    let toPage = item.docs?.find(ele => ele.path.replace(item.path, '') === pagePath )
+    console.log('topage', toPage, item)
+    if (!toPage) {
+      history.push(`${item.path}/introduction`)
+      return
+    }
+    history.push(toPage.path)
+  }
+
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    const handleMouseMove = (event) => {
+      let flag = dropdownRef.current.contains(event.target);
+      !flag && setShowDropdown(false);
+    };
+    if (showDropdown) {
+      window.addEventListener('mousemove', handleMouseMove);
+    } else {
+      window.removeEventListener('mousemove', handleMouseMove);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [showDropdown]);
+
+  return (
+    <div className={styles.dropdown} ref={dropdownRef}>
+      <div className={styles.dropdown_button} onMouseEnter={() => setShowDropdown(true)}>{selectedOption}</div>
+      {showDropdown && (<div className={styles.dropdown_content}>
+        {items.map((option, index) => (
+          <div className={`${styles.dropdown_link} ${selectedOption == option.label ? styles['dropdown_link--active'] : ''}`} key={index} onClick={() => handleClick(option)}>
+            {option.label}
+          </div>
+        ))}
+      </div>)}
+    </div>
+  )
+}

src/components/SelectNav/styles.module.css

@@ -0,0 +1,74 @@
+
+.dropdown {
+  color: var(--ifm-navbar-link-color);
+  font-weight: var(--ifm-font-weight-semibold);
+  /* flex: 1; */
+  line-height: 1.25;
+  padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+  margin: 0 .5rem;
+  margin-top: .5rem;
+  border-radius: 0.25rem;
+  position: relative;
+}
+.dropdown:hover {
+  background: var(--ifm-menu-color-background-hover);
+  color: var(--ifm-navbar-link-hover-color);
+}
+.dropdown_button {
+  cursor: pointer;
+}
+.dropdown_button::after {
+  border-color: currentColor transparent;
+  border-style: solid;
+  border-width: 0.4em 0.4em 0;
+  content: '';
+  display: inline-block;
+  margin-left: 0.3em;
+  position: relative;
+  top: 2px;
+  transform: translateY(-50%);
+}
+.dropdown_content {
+  max-height: 70vh;
+  background-color: var(--ifm-dropdown-background-color);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-md);
+  position: absolute;
+  top: 30px;
+  /* width: calc(var(--doc-sidebar-width) - 40px); */
+  width: 160px;
+  z-index: 9999;
+  padding: 0.5rem;
+  overflow: auto;
+  /* left: 0;
+  list-style: none;
+  max-height: 80vh;
+  min-width: 10rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+  pointer-events: none;
+  transform: translateY(-0.625rem);
+  visibility: hidden;
+  transition-property: opacity, transform, visibility;
+  transition-duration: var(--ifm-transition-fast);
+  transition-timing-function: var(--ifm-transition-timing-default); */
+}
+.dropdown_link {
+  border-radius: 0.25rem;
+  color: var(--ifm-dropdown-link-color);
+  display: block;
+  font-size: 0.875rem;
+  margin-top: 0.2rem;
+  padding: 0.25rem 0.5rem;
+  white-space: nowrap;
+  cursor: pointer;
+  line-height: var(--ifm-line-height-base);
+}
+.dropdown_link:hover,
+.dropdown_link--active {
+  background-color: var(--ifm-dropdown-hover-background-color);
+  text-decoration: none;
+}
+.dropdown_link--active {
+  color: var(--ifm-navbar-link-hover-color);
+}

src/theme/DocSidebar/index.js

@@ -19,6 +19,8 @@ import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import styles from './styles.module.css';
+import SelectNav from '@site/src/components/SelectNav';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function useShowAnnouncementBar() {
   const {isActive} = useAnnouncementBar();
@@ -64,13 +66,16 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
     navbar: {hideOnScroll},
     hideableSidebar,
   } = useThemeConfig();
+  const { globalData } = useDocusaurusContext();
+  const { versions } = globalData['docusaurus-plugin-content-docs'].default
   return (
     <div
-      className={clsx(styles.sidebar, {
+      className={clsx('sidebar-self', styles.sidebar, {
         [styles.sidebarWithHideableNavbar]: hideOnScroll,
         [styles.sidebarHidden]: isHidden,
       })}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+      <SelectNav items={versions} label="Select Software Version" />
       <nav
         className={clsx('menu thin-scrollbar', styles.menu, {
           [styles.menuWithAnnouncementBar]: showAnnouncementBar,