2019-02-03 17:23:33 +07:00
|
|
|
import styled, { css } from 'react-emotion';
|
2019-06-20 19:37:28 +07:00
|
|
|
import AppBar from '@material-ui/core/AppBar';
|
|
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
import colors from '../../utils/styles/colors';
|
|
|
|
import mq from '../../utils/styles/media';
|
|
|
|
|
2019-10-03 23:17:04 +07:00
|
|
|
import IconButton from '../../muiComponents/IconButton';
|
|
|
|
import ExternalLink from '../Link';
|
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const InnerNavBar = styled(Toolbar)({
|
|
|
|
'&&': {
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
alignItems: 'center',
|
|
|
|
padding: '0 15px',
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const Greetings = styled('span')({
|
|
|
|
'&&': {
|
|
|
|
margin: '0 5px 0 0',
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const RightSide = styled(Toolbar)({
|
|
|
|
'&&': {
|
|
|
|
display: 'flex',
|
|
|
|
padding: 0,
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const LeftSide = styled(RightSide)({
|
|
|
|
'&&': {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const MobileNavBar = styled('div')({
|
|
|
|
'&&': {
|
|
|
|
alignItems: 'center',
|
|
|
|
display: 'flex',
|
|
|
|
borderBottom: `1px solid ${colors.greyLight}`,
|
|
|
|
padding: '8px',
|
|
|
|
position: 'relative',
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const InnerMobileNavBar = styled('div')({
|
|
|
|
'&&': {
|
|
|
|
borderRadius: '4px',
|
|
|
|
backgroundColor: colors.greyLight,
|
|
|
|
color: colors.white,
|
|
|
|
width: '100%',
|
2019-08-09 03:58:15 +07:00
|
|
|
padding: '0 5px',
|
2019-07-15 16:57:32 +07:00
|
|
|
margin: '0 10px 0 0',
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const IconSearchButton = styled(IconButton)({
|
|
|
|
'&&': {
|
|
|
|
display: 'block',
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-07-15 16:57:32 +07:00
|
|
|
export const SearchWrapper = styled('div')({
|
|
|
|
'&&': {
|
|
|
|
display: 'none',
|
|
|
|
maxWidth: '393px',
|
|
|
|
width: '100%',
|
|
|
|
},
|
|
|
|
});
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
export const NavBar = styled(AppBar)`
|
|
|
|
&& {
|
|
|
|
background-color: ${colors.primary};
|
|
|
|
min-height: 60px;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2019-06-20 19:37:28 +07:00
|
|
|
${() => {
|
|
|
|
// @ts-ignore
|
|
|
|
return mq.medium(css`
|
|
|
|
${SearchWrapper} {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
${IconSearchButton} {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
${MobileNavBar} {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
}};
|
|
|
|
${() => {
|
|
|
|
// @ts-ignore
|
|
|
|
return mq.large(css`
|
|
|
|
${InnerNavBar} {
|
|
|
|
padding: 0 20px;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
}};
|
|
|
|
${() => {
|
|
|
|
// @ts-ignore
|
|
|
|
return mq.xlarge(css`
|
|
|
|
${InnerNavBar} {
|
|
|
|
max-width: 1240px;
|
|
|
|
width: 100%;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
}};
|
2019-02-03 17:23:33 +07:00
|
|
|
}
|
|
|
|
`;
|
2019-10-03 23:17:04 +07:00
|
|
|
|
|
|
|
export const StyledExternalLink = styled(ExternalLink)({
|
|
|
|
'&&': {
|
|
|
|
color: 'white',
|
|
|
|
},
|
|
|
|
});
|