/
createLink.js
117 lines (102 loc) · 2.53 KB
/
createLink.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
* Copyright 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails react-core
*/
'use strict';
import Link from 'gatsby-link';
import React from 'react';
import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
import isItemActive from 'utils/isItemActive';
import slugify from 'utils/slugify';
import {colors, media} from 'theme';
const createLinkBlog = ({item, location, section}) => {
const isActive = isItemActive(location, item);
return (
<Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
{isActive && <span css={activeLinkBefore} />}
{item.title}
</Link>
);
};
const createLinkCommunity = ({item, location, section}) => {
if (item.href) {
return (
<a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
{item.title}
<ExternalLinkSvg
cssProps={{
verticalAlign: -2,
display: 'inline-block',
marginLeft: 5,
color: colors.subtle,
}}
/>
</a>
);
}
return createLinkDocs({
item,
location,
section,
});
};
const createLinkDocs = ({item, location, section}) => {
const isActive = isItemActive(location, item);
return (
<Link
css={[linkCss, isActive && activeLinkCss]}
to={slugify(item.id, section.directory)}>
{isActive && <span css={activeLinkBefore} />}
{item.title}
</Link>
);
};
const createLinkTutorial = ({item, location, onLinkClick, section}) => {
const isActive = isItemActive(location, item);
return (
<Link
css={[linkCss, isActive && activeLinkCss]}
onClick={onLinkClick}
to={item.href}>
{isActive && <span css={activeLinkBefore} />}
{item.title}
</Link>
);
};
const activeLinkCss = {
fontWeight: 700,
};
const activeLinkBefore = {
width: 4,
height: 25,
borderLeft: `4px solid ${colors.brand}`,
paddingLeft: 16,
position: 'absolute',
left: 0,
marginTop: -3,
[media.greaterThan('largerSidebar')]: {
left: 15,
},
};
const linkCss = {
color: colors.text,
display: 'inline-block',
borderBottom: '1px solid transparent',
transition: 'border 0.2s ease',
marginTop: 5,
'&:hover': {
color: colors.subtle,
},
};
export {
createLinkBlog,
createLinkCommunity,
createLinkDocs,
createLinkTutorial,
};