You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.3 KiB
74 lines
1.3 KiB
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @emails react-core
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import Link from 'gatsby-link';
|
|
import React from 'react';
|
|
import {colors, media} from 'theme';
|
|
|
|
const HeaderLink = ({isActive, title, to}) => (
|
|
<Link css={[style, isActive && activeStyle]} to={to}>
|
|
{title}
|
|
{isActive && <span css={activeAfterStyle} />}
|
|
</Link>
|
|
);
|
|
|
|
const style = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
color: colors.white,
|
|
transition: 'color 0.2s ease-out',
|
|
paddingLeft: 15,
|
|
paddingRight: 15,
|
|
fontWeight: 300,
|
|
|
|
[media.size('xsmall')]: {
|
|
paddingLeft: 8,
|
|
paddingRight: 8,
|
|
},
|
|
|
|
[media.between('small', 'medium')]: {
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
},
|
|
|
|
[media.greaterThan('xlarge')]: {
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
fontSize: 18,
|
|
|
|
':hover': {
|
|
color: colors.brand,
|
|
},
|
|
},
|
|
};
|
|
|
|
const activeStyle = {
|
|
color: colors.brand,
|
|
|
|
[media.greaterThan('small')]: {
|
|
position: 'relative',
|
|
},
|
|
};
|
|
|
|
const activeAfterStyle = {
|
|
[media.greaterThan('small')]: {
|
|
position: 'absolute',
|
|
bottom: -1,
|
|
height: 4,
|
|
background: colors.brand,
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 1,
|
|
},
|
|
};
|
|
|
|
export default HeaderLink;
|
|
|