import React from "react";
import { Link, withRouter } from "react-router-dom";

class Navigation extends React.Component{
    render(){
        return (
          <div className="navigation">
            <nav class="navbar navbar-expand navbar-dark bg-dark">
              <div class="container">
                <Link class="navbar-brand" to="/">
                  React Libraries
                </Link>
                <ul class="navbar-nav ml-auto">
                  <li class={`nav-item  ${this.props.location.pathname === "/" ? "active" : ""}`}>
                    <Link class="nav-link" to="/">Home</Link>
                  </li>
                  <li class={`nav-item  ${this.props.location.pathname === "/about" ? "active" : ""}`}>
                    <Link class="nav-link" to="/about">About</Link>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        );
    }
}

export default withRouter(Navigation);