mirror of
https://github.com/SomboChea/ui
synced 2024-04-27 23:21:37 +07:00
107 lines
1.9 KiB
JavaScript
107 lines
1.9 KiB
JavaScript
/**
|
|
* @prettier
|
|
* @flow
|
|
*/
|
|
|
|
import styled, { css } from 'react-emotion';
|
|
import AppBar from '@material-ui/core/AppBar/index';
|
|
import Toolbar from '@material-ui/core/Toolbar/index';
|
|
import IconButton from '@material-ui/core/IconButton/index';
|
|
|
|
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;
|
|
}
|
|
`;
|
|
|
|
export const Greetings = styled.span`
|
|
&& {
|
|
margin: 0 5px 0 0;
|
|
}
|
|
`;
|
|
|
|
export const RightSide = styled(Toolbar)`
|
|
&& {
|
|
display: flex;
|
|
padding: 0;
|
|
}
|
|
`;
|
|
|
|
export const LeftSide = styled(RightSide)`
|
|
&& {
|
|
flex: 1;
|
|
}
|
|
`;
|
|
|
|
export const MobileNavBar = styled.div`
|
|
&& {
|
|
align-items: center;
|
|
display: flex;
|
|
border-bottom: 1px solid ${colors.greyLight};
|
|
padding: 8px;
|
|
position: relative;
|
|
}
|
|
`;
|
|
|
|
export const InnerMobileNavBar = styled.div`
|
|
&& {
|
|
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;
|
|
}
|
|
`;
|
|
|
|
export const SearchWrapper = styled.div`
|
|
&& {
|
|
display: none;
|
|
max-width: 393px;
|
|
width: 100%;
|
|
}
|
|
`;
|
|
|
|
export const NavBar = styled(AppBar)`
|
|
&& {
|
|
background-color: ${colors.primary};
|
|
min-height: 60px;
|
|
display: flex;
|
|
justify-content: center;
|
|
${mq.medium(css`
|
|
${SearchWrapper} {
|
|
display: flex;
|
|
}
|
|
${IconSearchButton} {
|
|
display: none;
|
|
}
|
|
${MobileNavBar} {
|
|
display: none;
|
|
}
|
|
`)};
|
|
${mq.large(css`
|
|
${InnerNavBar} {
|
|
padding: 0 20px;
|
|
}
|
|
`)};
|
|
${mq.xlarge(css`
|
|
${InnerNavBar} {
|
|
max-width: 1240px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
`)};
|
|
}
|
|
`;
|