You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.2 KiB
58 lines
1.2 KiB
import { Link } from 'react-router-dom'
|
|
|
|
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { devices, PAGES } from 'config'
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { HeaderGroup } from 'features/ProfileHeader/styled'
|
|
|
|
import { Logo } from 'features/Logo'
|
|
|
|
const HeaderStyled = styled.header`
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 65px;
|
|
|
|
@media ${devices.tablet} {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
justify-content: center;
|
|
@media (max-width: 650px){
|
|
margin-bottom: 20px;
|
|
}
|
|
@media (orientation: landscape){
|
|
margin-bottom: 20px;
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
const CustomHeaderGroup = styled(HeaderGroup)`
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
`
|
|
|
|
const HomeIcon = styled.div`
|
|
display: block;
|
|
width: 30px;
|
|
height:30px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-image: url(/images/home.png);
|
|
`
|
|
|
|
export const Header = () => (
|
|
<HeaderStyled>
|
|
<CustomHeaderGroup>
|
|
<Link to={PAGES.home}>
|
|
<Logo />
|
|
</Link>
|
|
<Link to={PAGES.home}>
|
|
<HomeIcon />
|
|
</Link>
|
|
</CustomHeaderGroup>
|
|
</HeaderStyled>
|
|
)
|
|
|