fixed header visibility error

Author: David Silva

package-lock.json

@@ -48,6 +48,7 @@
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-router-prop-types": "0.0.2",
     "react-router-redux": "next",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",

package.json

@@ -3,6 +3,7 @@ import logoTextHover from '../../images/logo-text-hover.png';
 import logoText from '../../images/logo-text.png';
 import Hoverimage from '../hoverImage';
 import '../../styles/_footer.scss';
+import { Link } from 'react-router-dom';
 
 class Footer extends React.Component {
     render() {
@@ -12,15 +13,15 @@ class Footer extends React.Component {
                     <div className="row">
                         <div className="col-md-4 col-sm-6 inner">
                             <h4>About Us</h4>
-                            <a href="/about">
+                            <Link to="/about">
                                 <Hoverimage width="168" className="logo" alt="codecorgi logo" image1={logoText} image2={logoTextHover} />
-                            </a>
+                            </Link>
                             <p>
                                 Work through tickets/challenges like a real programmer does on the job.
                                 codecorgi provides simulation project management tickets for you
                                 to build real products and grow your developer portfolio.
                             </p>
-                            <a href="/about" className="txt-btn">About us</a>
+                            <Link to="/about" className="txt-btn">About us</Link>
                         </div>
                         <div className="col-md-4 hidden-md hidden-sm col-sm-6 inner">
                             {/* <h4>Latest works</h4>
@@ -61,9 +62,9 @@ class Footer extends React.Component {
                     <div className="container inner">
                         <p className="pull-left">© 2017 codecorgi. All rights reserved.</p>
                         <ul className="footer-menu pull-right">
-                            <li><a href="/">Home</a></li>
-                            <li><a href="/learning">Learning</a></li>
-                            <li><a href="/about">About</a></li>
+                            <li><Link to="/">Home</Link></li>
+                            <li><Link to="/learning">Learning</Link></li>
+                            <li><Link to="/about">About</Link></li>
                             <li><a href="http://services.codecorgi.co/">Services</a></li>
                         </ul>
                     </div>

src/components/footer/index.js

@@ -4,14 +4,24 @@ import logoTextHover from '../../images/logo-text-hover.png';
 import logoText from '../../images/logo-text.png';
 import '../../styles/_header.scss';
 import Hoverimage from '../hoverImage';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import ReactRouterPropTypes from 'react-router-prop-types';
 
 class Header extends React.Component {
+    static propTypes = {
+        history: ReactRouterPropTypes.history.isRequired,
+    }
+
     constructor(props) {
         super(props);
         this.toggleVisibility = this.toggleVisibility.bind(this);
         this.state = {
             visible: false,
         };
+        this.props.history.listen(() => {
+            this.setState({ visible: false });
+        });
     }
 
     toggleVisibility() {
@@ -31,22 +41,21 @@ class Header extends React.Component {
                             <li><a href="#"><i class="icon-s-behance"></i></a></li>
                             <li><a href="#"><i class="icon-s-dribbble"></i></a></li>*/}
                         </ul>
-                        <Link className="navbar-brand" onClick={this.toggleVisibility} to="/">
+                        <Link className="navbar-brand"  to="/">
                             <Hoverimage width="168" className="logo" alt="codecorgi logo" image1={logoText} image2={logoTextHover} />
                         </Link>
                         <a className="navbar-toggle btn responsive-menu pull-right red-button" onClick={this.toggleVisibility}><i className="icon-menu-1"/></a>
                     </div>
                 </div>
                 <div className="yamm">
-                    <div className={'navbar-collapse visible-md visible-lg' + (this.state.visible ? 'visible-sm visible-xs' : '')}>
+                    <div className={'navbar-collapse visible-md visible-lg ' + (this.state.visible ? 'visible-sm visible-xs' : '')}>
                         <div className="container">
-                            <Link className="navbar-brand" onClick={this.toggleVisibility} to="/">
-                                {this.state.hover && <img src={logoTextHover} className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
-                                {!this.state.hover && <img src={logoText} className="logo" alt="codecorgi logo" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseOut} />}
+                            <Link className="navbar-brand"  to="/">
+                                <Hoverimage width="168" className="logo" alt="codecorgi logo" image1={logoText} image2={logoTextHover} />
                             </Link>
                             <ul className="nav navbar-nav">
                                 <li>
-                                    <Link to="/challenges" onClick={this.toggleVisibility}>Challenges</Link>
+                                    <Link to="/challenges">Challenges</Link>
                                 </li>
                                 <li>
                                     <Link className="red-button" to="/app#!/signup" onClick={this.toggleVisibility}>Account</Link>
@@ -60,4 +69,12 @@ class Header extends React.Component {
     }
 }
 
-export default Header;
+function mapStateToProps() {
+    return {};
+}
+
+function mapDispatchToProps() {
+    return {};
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header));

src/components/header/index.js

@@ -8,7 +8,7 @@ class About extends React.Component {
     render() {
         return(
             <main>
-                <section id="hero" className="tint-bg img-bg-softer" style={{backgroundImage: `url(${patternBg})`}}>
+                <section id="hero" className="tint-bg img-bg-softer" style={{backgroundRepeat: 'repeat', backgroundImage: `url(${patternBg})`}}>
                     <div className="container inner">
                         <div className="row">
                             <div className="col-sm-10 aos-init aos-animate" data-aos="fade-up">

src/containers/about/index.js

@@ -1,3 +1,6 @@
+main {
+    margin-top: -20px;
+}
 
 .red-button {
     background-color: #fa6c65;