feat(header): new header component

feat(header): new header component

src/common/components/Header/index.jsx

@@ -0,0 +1,55 @@
+/**
+ * @flow
+ */
+import React from 'react'
+import {connect} from 'react-redux'
+import {Icon} from 'semantic-ui-react'
+import {withRouter, matchPath} from 'react-router'
+import _ from 'lodash'
+import {TOGGLE_SIDEBAR} from 'actions/layout'
+import {StyledHeader} from './style'
+import {getMetaRoutes} from 'routing'
+import {getLayoutMobileStatuses} from 'selectors'
+import Headroom from 'react-headroom'
+
+type Props = {
+	title: string,
+	toggleSidebar: () => void,
+	isMobile: boolean
+}
+
+const Header = ({title, toggleSidebar, isMobile}: Props) => {
+	return (
+		<Headroom>
+			<StyledHeader>
+				<div className="header-inner">
+					{isMobile && (
+						<span className="navicon" role="button" onClick={toggleSidebar}>
+							<Icon name="content" />
+						</span>
+					)}
+					<span className="page-title">{title}</span>
+				</div>
+			</StyledHeader>
+		</Headroom>
+	)
+}
+
+const mapStateToProps = (state, props) => {
+	const {location: {pathname}} = props
+	const {name: title} =
+		_.find(getMetaRoutes(), a => matchPath(pathname, a)) || {}
+	const {isMobile} = getLayoutMobileStatuses(state)
+	return {
+		title,
+		isMobile
+	}
+}
+
+const mapDispatchToProps = dispatch => ({
+	toggleSidebar () {
+		dispatch(TOGGLE_SIDEBAR)
+	}
+})
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header))

src/common/components/Header/style.jsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+import {media} from 'styles/utils'
+
+export const StyledHeader = styled.header`
+	background: ${props => props.theme.navy};
+	color: ${props => props.theme.white};
+	border-bottom: 1px solid ${props => props.theme.black};;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	width: 100%;
+	z-index: 444;
+	height: 72px;
+
+	.header-inner {
+		display: flex;
+		padding: 0 15px;
+	}
+
+	.page-title {
+		line-height: 1;
+		font-size: 24px;
+		align-items: center;
+		display: flex;
+	}
+
+	.navicon {
+		width: 48px;
+		height: 48px;
+		padding: 12px;
+		line-height: 1;
+		font-size: 24px;
+		display: none;
+		${media.md`
+			display: block;
+		`};
+	}
+`