text: import React, { Component } from 'react';
  
  const Tb = "{Tb.}";
  
  export class Navigation extends Component {
  
      constructor(props) {
          super(props);
      
          this.state = {
              prevScrollpos: window.pageYOffset,
              visible: true
          };
      }
  
      componentDidMount() {
          window.addEventListener("scroll", this.handleScroll);
      }
  
      componentWillUnmount() {
          window.removeEventListener("scroll", this.handleScroll);
      }
  
      handleScroll = () => {
          const { prevScrollpos } = this.state;
      
          const currentScrollPos = window.pageYOffset;
          const visible = prevScrollpos > currentScrollPos;
      
          this.setState({
            prevScrollpos: currentScrollPos,
            visible
          });
        };
  
      render() {
          return (
              <nav className={`navbar${this.state.visible ? "" : " navbar--hidden" }`}>
                  <div className="navigation">
                      <div className="nav-logo">
                          <a href="#home">{Tb}</a>
                      </div>
                      <div className="nav-link">
                          <a href="#competences">Compétences</a>
                          <a href="#portfolio">Portfolio</a>
                          <a href="#contact">Contact</a>
                      </div>    
                  </div>
              </nav>
          )
      }
  }
  
  export default Navigation
  