-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
SidebarNav.js
86 lines (78 loc) · 2.05 KB
/
SidebarNav.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
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
/** @jsx jsx */
import React from 'react'; // eslint-disable-line no-unused-vars
import { Link } from 'gatsby';
import { colors, gridSize } from '@arch-ui/theme';
import { jsx } from '@emotion/core';
import { useNavData } from '../utils/hooks';
export const SidebarNav = () => {
const navData = useNavData();
const navGroups = Object.keys(navData);
return (
<nav aria-label="Documentation Menu">
{navGroups.map(navGroup => {
const sectionId = `docs-menu-${navGroup}`;
const pages = navData[navGroup];
return (
<div key={navGroup}>
<GroupHeading id={sectionId}>{navGroup.replace('-', ' ')}</GroupHeading>
<List aria-labelledby={sectionId}>
{pages.map(node => {
return (
<ListItem key={node.path} to={node.path}>
{node.context.pageTitle}
</ListItem>
);
})}
</List>
</div>
);
})}
</nav>
);
};
const GroupHeading = props => (
<h3
css={{
color: colors.N80,
fontSize: '0.9rem',
fontWeight: 700,
marginTop: '2.4em',
textTransform: 'uppercase',
}}
{...props}
/>
);
const List = props => (
<ul css={{ listStyle: 'none', fontSize: '0.9rem', padding: 0, margin: 0 }} {...props} />
);
const ListItem = props => (
<li>
<Link
css={{
color: colors.N80,
borderRadius: 3,
display: 'block',
overflow: 'hidden',
marginBottom: 1,
outline: 0,
padding: `${gridSize * 0.75}px ${gridSize * 1.5}px`,
textDecoration: 'none',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
':hover, :focus': {
backgroundColor: colors.B.A5,
color: colors.N100,
textDecoration: 'none',
},
':active': {
backgroundColor: colors.B.A10,
},
'&[aria-current="page"]': {
backgroundColor: colors.B.A10,
fontWeight: 500,
},
}}
{...props}
/>
</li>
);