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