59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import NavBar from '../App/Navbar'
|
|
import NavBarLink from '../App/NavBarLink'
|
|
|
|
class Header extends Component {
|
|
render = () => {
|
|
const { signedIn, section, user } = this.props
|
|
|
|
const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
|
|
const mapper = section === 'mapper'
|
|
|
|
return (
|
|
<NavBar>
|
|
<NavBarLink show={explore}
|
|
href={signedIn ? '/' : '/explore/active'}
|
|
linkClass="activeMaps"
|
|
text="All Maps"
|
|
/>
|
|
<NavBarLink show={signedIn && explore}
|
|
href="/explore/mine"
|
|
linkClass="myMaps"
|
|
text="My Maps"
|
|
/>
|
|
<NavBarLink show={signedIn && explore}
|
|
href="/explore/shared"
|
|
linkClass="sharedMaps"
|
|
text="Shared With Me"
|
|
/>
|
|
<NavBarLink show={signedIn && explore}
|
|
href="/explore/starred"
|
|
linkClass="starredMaps"
|
|
text="Starred By Me"
|
|
/>
|
|
<NavBarLink show={!signedIn && explore}
|
|
href="/explore/featured"
|
|
linkClass="featuredMaps"
|
|
text="Featured Maps"
|
|
/>
|
|
{mapper ? (
|
|
<div className='navBarButton active mapperButton'>
|
|
{user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
|
|
{user && <div className='exploreMapperName'>{user.name}’s Maps</div>}
|
|
<div className='clearfloat'></div>
|
|
</div>
|
|
) : null }
|
|
</NavBar>
|
|
)
|
|
}
|
|
}
|
|
|
|
Header.propTypes = {
|
|
signedIn: PropTypes.bool.isRequired,
|
|
section: PropTypes.string.isRequired,
|
|
user: PropTypes.object
|
|
}
|
|
|
|
export default Header
|