-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
MenuHeadings.tsx
52 lines (46 loc) · 1.36 KB
/
MenuHeadings.tsx
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
import * as React from 'react'
import { SFC } from 'react'
import { Entry, useDocs, useConfig } from 'docz'
import { Location } from '@reach/router'
import styled from 'styled-components'
import get from 'lodash/get'
import { SmallLink } from './SmallLink'
const Submenu = styled.div`
display: flex;
flex-direction: column;
margin: 5px 0 0 24px;
`
const getHeadings = (route: string, docs: Entry[]) => {
const doc = docs.find(doc => doc.route === route)
const headings = get(doc, 'headings')
return headings ? headings.filter(heading => heading.depth === 2) : []
}
interface MenuHeadingsProps {
route: string
onClick?: React.MouseEventHandler<any>
}
export const MenuHeadings: SFC<MenuHeadingsProps> = ({ route, onClick }) => {
const docs = useDocs()
const { linkComponent: Link } = useConfig()
const headings = docs && getHeadings(route, docs)
return headings && headings.length > 0 ? (
<Location>
{({ location }) => (
<Submenu>
{headings.map((heading: any) => (
<SmallLink
as={Link}
location={location}
key={heading.slug}
onClick={onClick}
to={`${route}#${heading.slug}`}
slug={heading.slug}
>
{heading.value}
</SmallLink>
))}
</Submenu>
)}
</Location>
) : null
}