-
Notifications
You must be signed in to change notification settings - Fork 147
/
index.jsx
110 lines (97 loc) · 3.35 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React from 'react';
import { useHistory } from '@docusaurus/router';
import clsx from 'clsx';
import VersionDropdown from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
import useGlobalData from '@docusaurus/useGlobalData';
import SectionsMenu from '../SectionsMenu';
import { useSectionMenu } from '../../lib/useSectionMenu';
import styles from './styles.module.css';
function getPrettyPath(path) {
return path.slice(-1) === '/' ? path.slice(0, -1) : path;
}
export default function SidebarMenu() {
const router = useHistory();
const data = useSectionMenu();
const { docId, currentSection, sections, groups } = data;
const globalData = useGlobalData();
const allDocs = globalData['docusaurus-plugin-content-docs'];
if (!sections && !groups) return null;
const handleSectionChange = (selectedSection) => {
if (selectedSection !== docId) {
const { pathname, hash } = router.location;
const page =
`/${selectedSection}/` + pathname.split('/').slice(2).join('/');
const selectedSectionDocs = allDocs[selectedSection].versions[0].docs;
if (selectedSectionDocs.find((doc) => doc.path === page)) {
const path = page + (hash && hash.length > 0 ? '#' + hash : '');
router.push(getPrettyPath(path));
} else {
const path = selectedSectionDocs[0].path;
router.push(getPrettyPath(path));
}
}
};
if (sections) {
return (
<div className={styles.container}>
<SectionsMenu
defaultValue={docId}
values={sections}
onValueChange={handleSectionChange}
triggerClassName={styles.sectionsMenu}
/>
<VersionDropdown
docsPluginId={docId}
dropdownItemsBefore={[]}
dropdownItemsAfter={[]}
/>
</div>
);
}
return (
<div className={clsx('sidebar-menu', styles.multiSectionContainer)}>
{groups.map((group) => {
const { name, docs, description, className } = group;
const isCurrentSection = currentSection === group.section;
const navigateToFirstSection = () => handleSectionChange(docs[0].docId);
return (
<div
className={clsx(
styles.section,
isCurrentSection && styles.sectionActive
)}
onClick={navigateToFirstSection}
onKeyDown={(e) => {
if (e.code === 'Space' || e.code == 'Enter') {
navigateToFirstSection();
}
}}
tabIndex={0}
key={group.name}
>
<div className={clsx(styles.label, className)}>{name}</div>
<div>
{isCurrentSection ? (
<div className={styles.row}>
<SectionsMenu
defaultValue={isCurrentSection ? docId : docs[0].id}
values={docs}
onValueChange={handleSectionChange}
triggerClassName={styles.sectionsMenu}
/>
<VersionDropdown
docsPluginId={docId}
dropdownItemsBefore={[]}
dropdownItemsAfter={[]}
/>
</div>
) : (
<p className={styles.description}>{description}</p>
)}
</div>
</div>
);
})}
</div>
);
}