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';
|
|
|
|
import IconButton from '@material-ui/core/IconButton';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
import colors from '../../utils/styles/colors';
|
|
|
|
import mq from '../../utils/styles/media';
|
|
|
|
|
|
|
|
export const InnerNavBar = styled(Toolbar)`
|
|
|
|
&& {
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0 15px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
export const Greetings = styled('span')`
|
2019-02-03 17:23:33 +07:00
|
|
|
&& {
|
|
|
|
margin: 0 5px 0 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export const RightSide = styled(Toolbar)`
|
|
|
|
&& {
|
|
|
|
display: flex;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export const LeftSide = styled(RightSide)`
|
|
|
|
&& {
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
export const MobileNavBar = styled('div')`
|
2019-02-03 17:23:33 +07:00
|
|
|
&& {
|
|
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
|
|
border-bottom: 1px solid ${colors.greyLight};
|
|
|
|
padding: 8px;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
export const InnerMobileNavBar = styled('div')`
|
2019-02-03 17:23:33 +07:00
|
|
|
&& {
|
|
|
|
border-radius: 4px;
|
|
|
|
background-color: ${colors.greyLight};
|
|
|
|
color: ${colors.white};
|
|
|
|
width: 100%;
|
|
|
|
padding: 0px 5px;
|
|
|
|
margin: 0 10px 0 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export const IconSearchButton = styled(IconButton)`
|
|
|
|
&& {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
export const SearchWrapper = styled('div')`
|
2019-02-03 17:23:33 +07:00
|
|
|
&& {
|
|
|
|
display: none;
|
|
|
|
max-width: 393px;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
`;
|