content: import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  
  let from = 0, to = 0;
  class Header extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              indexFrom: 1,
              indexTo: 1,
              classForLine: ''
          }
      }
  
      getActive = (route) => {
          return window.location.pathname.indexOf(route) > -1 ? true : false
      }
  
      changeRoute = (e) => {
          from = to;
          if(e.currentTarget.name === 'home') {
              to = 1;
          } else if(e.currentTarget.name === 'about') {
              to = 2;
          } else if(e.currentTarget.name === 'projects') {
              to = 3;
          }
  
          if(from - to < 0) {
              window.text = 'slideInLeft'
          } else if(from - to > 0) {
              window.text = 'slideInRight'
          }
      }
  
      render() {
  
          return (
              <div className="primary-layout__header__wrapper">
                  <h2 className="author">Odarino</h2>
                  <p className="author-description"> just a random silhouette </p>
                  <div className="primary-menu">
                      <ul>
                          <li>
                              <Link to="/home" name="home" onClick={this.changeRoute}>Home</Link>
                              {
                                  this.getActive('/home') && <div className={`active animated ${window.text}`}></div>
                              }
                          </li>
                          <li>
                              <Link to="/about" name="about" onClick={this.changeRoute}>About</Link>
                              {
                                  this.getActive('/about') && <div className={`active animated ${window.text}`}></div>
                              }
                          </li>
                          <li>
                              <Link to="/projects" name="projects" onClick={this.changeRoute}>Projects</Link>
                              {
                                  this.getActive('/projects') && <div className={`active animated ${window.text}`}></div>
                              }
                          </li>
                      </ul>
                  </div>
              </div>
          );
      }
  }
  
  export default Header;