joyent-portal/packages/ui-toolkit/src/styleguide/header.js

63 lines
1.3 KiB
JavaScript

import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import Logo from './logo';
import GHLogo from './ghlogo';
const Header = styled.header`
background: ${props => props.theme.greyDarker};
color: ${props => props.theme.white};
height: ${remcalc(48)};
padding: 0 ${remcalc(24)};
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 2;
`;
const List = styled.ul`
list-style: none;
display: flex;
margin: 0;
padding: 0;
li {
a {
color: ${props => props.theme.white};
text-decoration: none;
}
&:not(:last-child) {
border-right: ${remcalc(1)} solid ${props => props.theme.text};
padding-right: ${remcalc(24)};
margin-right: ${remcalc(24)};
}
}
`;
export default () => (
<Header>
<List>
<li>
<a href="/">Visuals</a>
</li>
<li>Copy Guide</li>
<li>
<a href="#!/Download">Downloads</a>
</li>
</List>
{decodeURIComponent(window.location.href).split('/#!/')[1] !== '/' ? (
<Logo />
) : null}
<a
href="https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit"
rel="noopener noreferrer"
target="_blank"
>
<GHLogo />
</a>
</Header>
);