54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import Media from 'react-media';
|
||
|
|
import { Col, Navbar, Row } from 'react-bootstrap';
|
||
|
|
import FCCSearchBar from 'react-freecodecamp-search';
|
||
|
|
import { NavLogo, BinButtons, NavLinks } from './components';
|
||
|
|
|
||
|
|
import propTypes from './navPropTypes';
|
||
|
|
|
||
|
|
function SmallNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
|
||
|
|
return (
|
||
|
|
<Media
|
||
|
|
query='(max-width: 750px)'
|
||
|
|
render={
|
||
|
|
() => (
|
||
|
|
<div>
|
||
|
|
<Row>
|
||
|
|
<Navbar.Header className='small-nav'>
|
||
|
|
<div className='nav-component header'>
|
||
|
|
<Navbar.Toggle />
|
||
|
|
<NavLogo clickOnLogo={ clickOnLogo } />
|
||
|
|
</div>
|
||
|
|
<div className='nav-component bins'>
|
||
|
|
<BinButtons panes={ panes } />
|
||
|
|
</div>
|
||
|
|
</Navbar.Header>
|
||
|
|
</Row>
|
||
|
|
<Row>
|
||
|
|
<Col xs={ 12 }>
|
||
|
|
<Navbar.Collapse>
|
||
|
|
<NavLinks
|
||
|
|
clickOnMap={ clickOnMap }
|
||
|
|
shouldShowMapButton={ shouldShowMapButton }
|
||
|
|
>
|
||
|
|
<FCCSearchBar
|
||
|
|
dropdown={ true }
|
||
|
|
placeholder=
|
||
|
|
' Search 8,000+ lessons, articles, and videos'
|
||
|
|
/>
|
||
|
|
</NavLinks>
|
||
|
|
</Navbar.Collapse>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
SmallNav.displayName = 'SmallNav';
|
||
|
|
SmallNav.propTypes = propTypes;
|
||
|
|
|
||
|
|
export default SmallNav;
|