-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
index.js
49 lines (47 loc) · 1.48 KB
/
index.js
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
/** @jsx jsx */
import { jsx } from 'theme-ui'
import React from 'react'
import { useCurrentDoc } from 'docz'
import * as styles from './styles'
import { NavLink } from '../NavLink'
import { ChevronDown } from '../Icons'
export const NavGroup = ({ item, sidebarRef }) => {
const currentDoc = useCurrentDoc()
const currentDocRef = React.useRef()
const { name, menu } = item
const [subheadingsVisible, setShowsubheadings] = React.useState(
currentDoc.menu === name
)
const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible)
React.useEffect(() => {
if (sidebarRef.current && currentDocRef.current) {
sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop)
}
}, [])
return (
<div sx={styles.wrapper} data-testid="nav-group">
<div sx={styles.title} onClick={toggleSubheadings}>
{item.name}
<ChevronDown sx={styles.chevron({ active: subheadingsVisible })} />
</div>
<div sx={styles.sublinkWrapper} data-testid="nav-group-links">
{menu &&
subheadingsVisible &&
menu.map(menu => {
if (currentDoc.route === menu.route) {
return (
<NavLink key={menu.id} item={menu} ref={currentDocRef}>
{menu.name}
</NavLink>
)
}
return (
<NavLink key={menu.id} item={menu}>
{menu.name}
</NavLink>
)
})}
</div>
</div>
)
}