forked from acouzens/open5gs
64 lines
1.2 KiB
JavaScript
64 lines
1.2 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
|
|
import styled from 'styled-components';
|
|
import oc from 'open-color';
|
|
|
|
import MenuIcon from 'react-icons/lib/md/menu';
|
|
import {ThumbnailIcon} from 'components';
|
|
|
|
const Wrapper = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
height: 4rem;
|
|
|
|
color: white;
|
|
background: ${oc.indigo[8]};
|
|
border-bottom: 1px solid ${oc.indigo[9]};
|
|
`;
|
|
|
|
const Menu = styled.div`
|
|
display: inline-flex;
|
|
margin: 0 1.5rem;
|
|
|
|
cursor: pointer;
|
|
font-size: 1.5rem;
|
|
`;
|
|
|
|
const Title = styled.div`
|
|
margin: 0 0.5rem;
|
|
|
|
font-size: 1.5rem;
|
|
font-family: 'Ubuntu', sans-serif;
|
|
`;
|
|
|
|
const Thumbnail = styled.div`
|
|
padding: 1rem 0;
|
|
|
|
position: absolute;
|
|
right: 1rem;
|
|
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const propTypes = {
|
|
onSidebarToggle: PropTypes.func.isRequired,
|
|
onLogout: PropTypes.func.isRequired
|
|
}
|
|
|
|
const Header = ({ onSidebarToggle, onLogoutRequest }) => (
|
|
<Wrapper>
|
|
<Menu onClick={onSidebarToggle}>
|
|
<MenuIcon/>
|
|
</Menu>
|
|
<Title>
|
|
Next.EPC
|
|
</Title>
|
|
<Thumbnail onClick={onLogoutRequest}>
|
|
<ThumbnailIcon size="2rem" color={oc['pink'][4]} />
|
|
</Thumbnail>
|
|
</Wrapper>
|
|
)
|
|
|
|
Header.propTypes = propTypes;
|
|
|
|
export default Header; |