140 lines
2.4 KiB
JavaScript
140 lines
2.4 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import breakpoint from 'styled-components-breakpoint';
|
|
import {
|
|
signin,
|
|
developers,
|
|
changelog,
|
|
githubUrl,
|
|
spectrumUrl,
|
|
blogUrl,
|
|
twitterUrl,
|
|
} from '../../../shared/utils/routeHelpers';
|
|
import { color } from '../../../shared/styles/constants';
|
|
|
|
function TopNavigation() {
|
|
return (
|
|
<Nav>
|
|
<Brand href="/">Outline</Brand>
|
|
<Menu>
|
|
<MenuItemDesktop>
|
|
<a href="/#features">Features</a>
|
|
</MenuItemDesktop>
|
|
<MenuItemDesktop>
|
|
<a href={blogUrl()}>Blog</a>
|
|
</MenuItemDesktop>
|
|
<MenuItemDesktop>
|
|
<a href={changelog()}>Changelog</a>
|
|
</MenuItemDesktop>
|
|
<MenuItem>
|
|
<a href={developers()}>API</a>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<a href={signin()}>Sign In</a>
|
|
</MenuItem>
|
|
</Menu>
|
|
</Nav>
|
|
);
|
|
}
|
|
|
|
function BottomNavigation() {
|
|
return (
|
|
<BottomNav>
|
|
<div>
|
|
<a href={githubUrl()}>GitHub</a>
|
|
</div>
|
|
<div>
|
|
<a href={spectrumUrl()}>Spectrum</a>
|
|
</div>
|
|
<div>
|
|
<a href={blogUrl()}>Medium</a>
|
|
</div>
|
|
<div>
|
|
<a href={twitterUrl()}>Twitter</a>
|
|
</div>
|
|
</BottomNav>
|
|
);
|
|
}
|
|
|
|
const MenuLinkStyle = `
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
|
|
a {
|
|
color: ${color.slate};
|
|
}
|
|
|
|
a:hover {
|
|
color: ${color.slateDark};
|
|
text-decoration: underline;
|
|
}
|
|
`;
|
|
|
|
const Menu = styled.ul`
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
`;
|
|
|
|
const MenuItem = styled.li`
|
|
display: inline-block;
|
|
margin: 0 0 0 40px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
${MenuLinkStyle};
|
|
`;
|
|
|
|
const MenuItemDesktop = styled(MenuItem)`
|
|
display: none;
|
|
|
|
${breakpoint('tablet')`
|
|
display: inline-block;
|
|
`};
|
|
`;
|
|
|
|
const Nav = styled.nav`
|
|
display: flex;
|
|
padding: 20px 30px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
`;
|
|
|
|
const BottomNav = styled.nav`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-bottom: 40px;
|
|
|
|
> div {
|
|
display: flex;
|
|
margin: 0 0 40px 0;
|
|
${MenuLinkStyle};
|
|
}
|
|
|
|
${breakpoint('tablet')`
|
|
flex-direction: row;
|
|
|
|
> div {
|
|
margin: 0 0 0 40px;
|
|
|
|
&:first-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
`};
|
|
`;
|
|
|
|
const Brand = styled.a`
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
text-decoration: none;
|
|
color: ${color.black};
|
|
`;
|
|
|
|
export { TopNavigation, BottomNavigation };
|