gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: added react-media

Browse Source
This commit is contained in:
Ahmad Abdolsaheb
2019-02-28 10:39:56 +03:00
committed by Stuart Taylor
parent 897b9110fc
commit b3bc6776ec
1 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client/src/components/Header/index.js
View File

@@ -48,7 +48,6 @@ class Header extends Component {
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside);
console.log('header unmount');
}
toggleDisplayMenuLogic = () => {
@@ -87,10 +86,6 @@ class Header extends Component {
};
render() {
const viewportWidth = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
);
const {
disableSettings,
onGuide,
@@ -104,26 +99,30 @@ class Header extends Component {
<NavLogo />
</Link>
{disableSettings ? null : <FCCSearch />}
{onGuide && displayMenu && viewportWidth < 991 ? null : (
<ul id='top-right-nav'>
<li onClick={toggleDisplayMenu}>
<Link to='/learn'>Learn</Link>
</li>
<li onClick={toggleDisplayMenu}>
<Link external={true} to='/forum'>
Forum
</Link>
</li>
<li onClick={toggleDisplayMenu}>
<Link external={true} to='/news'>
News
</Link>
</li>
<li className='user-state-link' onClick={toggleDisplayMenu}>
<UserState disableSettings={disableSettings} />
</li>
</ul>
)}
<Media query='(max-width: 991px)'>
{matches =>
matches && onGuide && displayMenu ? null : (
<ul id='top-right-nav'>
<li onClick={toggleDisplayMenu}>
<Link to='/learn'>Learn</Link>
</li>
<li onClick={toggleDisplayMenu}>
<Link external={true} to='/forum'>
Forum
</Link>
</li>
<li onClick={toggleDisplayMenu}>
<Link external={true} to='/news'>
News
</Link>
</li>
<li className='user-state-link' onClick={toggleDisplayMenu}>
<UserState disableSettings={disableSettings} />
</li>
</ul>
)
}
</Media>
<span
className='menu-button'
onClick={this.toggleDisplayMenuLogic}
@@ -131,7 +130,17 @@ class Header extends Component {
>
Menu
</span>
<Media onChange={this.handleMediaChange} query='(max-width: 734px)' />
{onGuide ? (
<Media
onChange={this.handleMediaChange}
query='(max-width: 991px)'
/>
) : (
<Media
onChange={this.handleMediaChange}
query='(max-width: 734px)'
/>
)}
</nav>
</header>
);