import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Route, withRouter, NavLink as Link } from 'react-router-dom';
import Toggle from './Toggle';
import Title from './Title';
const StyledHeader = styled.header`
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: start;
margin-top: 1rem;
@media (min-width: 769px) {
justify-content: space-between;
}
`;
const StyledLinkContainer = styled.div`
display: inline-flex;
`;
const StyledSettingsContainer = styled.div`
display: inline-flex;
margin: 1rem 0;
width: 100%;
@media (min-width: 541px) {
margin: 0;
width: auto;
}
`;
const linkStyle = css`
border-bottom: 1px solid ${props => props.theme.link};
color: ${props => props.theme.link};
display: inline-flex;
font-size: 0.875rem;
margin: 0.5rem 2rem 0 0;
padding-bottom: 1px;
text-decoration: none;
`;
const StyledRouterLink = styled(Link)`
${linkStyle}
&:hover {
border-bottom: none;
}
`;
const StyledRouterSpan = styled.span`
${linkStyle}
border-bottom: none;
color: ${props => props.theme.active};
`;
const Header = props => {
const {
location: { pathname }
} = props;
const paths = [
{
path: '/',
page: 'Game'
},
{
path: '/patterns',
page: 'Pattern Reference'
},
{
path: '/about',
page: 'About'
}
];
return (
{paths.map(({ path, page }) =>
pathname === path || (path === '/patterns' && pathname.includes(path)) ? (
{page}
) : (
{page}
)
)}
} />
</StyledHeader>
);
};
Header.propTypes = {
location: PropTypes.object.isRequired
};
export default withRouter(Header);