Merge pull request #20 from Amrutha1101/highlightingNavbar

HighightingNavbar

Author: MukulKolpe

src/components/Navbar.js

@@ -3,7 +3,7 @@ import {withRouter} from "react-router-dom";
 import React from 'react';
 import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import "../style/Navbar.css";
-
+import {NavLink} from 'react-router-dom';
 
 class Navbar extends React.Component{
   search(){
@@ -41,19 +41,20 @@ class Navbar extends React.Component{
           <div className="collapse navbar-collapse" id="navbarSupportedContent">
             <ul className="navbar-nav me-auto mb-2 mb-lg-0">
               <li className="nav-item">
-                <Link className="nav-link" to="/">
+                <NavLink exact to="/" className="nav-link" 
+                activeClassName="main-nav-active">
                   Home
-                </Link>
+                </NavLink>
               </li>
               <li className="nav-item">
-                <Link className="nav-link" to="/Signup">
+                <NavLink exact to="/Signup" className="nav-link" activeClassName="main-nav-active">
                   SignUp
-                </Link>
+                </NavLink>
               </li>
               <li className="nav-item">
-                <Link className="nav-link" to="/login">
+                <NavLink exact to="/login"  className="nav-link" activeClassName="main-nav-active">
                   Login
-                </Link>
+                </NavLink>
               </li>
 
             </ul>

src/style/Navbar.css

@@ -10,22 +10,33 @@
 .nav-item {
   margin-left: 20px;
 }
+.navbar-search-btn {
+  float: left !important;
+  margin-left: 0 !important;
+  margin-top: 0 !important;
+  height: 38px !important;
+  box-shadow: none !important;
+}
 .navbar-nav .nav-item .nav-link {
   font-size: 20px;
   font-weight: 700;
+  width: 100px;
   text-transform: uppercase;
   color: #3ed9fa;
+  background-color: #111;
+  border-radius: 50px;
+  color: #e0e0e0 !important;
 }
 
 .navbar-nav .nav-item .nav-link:hover {
-  background-color: white !important;
-  color: black !important;
+  width:100px;
+  color: #e0e0e0 !important;
+  border-radius: 50px;
+  background: #ff3547;
 }
+.main-nav-active{
+  width:100px;
+  background:  #ff3547 !important;
+  border-radius: 50px;
 
-.navbar-search-btn {
-  float: left !important;
-  margin-left: 0 !important;
-  margin-top: 0 !important;
-  height: 38px !important;
-  box-shadow: none !important;
 }

src/style/Navbar2.css

@@ -13,11 +13,23 @@
 .navbar-nav .nav-item .nav-link {
   font-size: 20px;
   font-weight: 700;
+  width:100px;
   text-transform: uppercase;
   color: #3ed9fa;
+  background-color: #111;
+  border-radius: 50px;
+  color: #e0e0e0 !important;
 }
 
 .navbar-nav .nav-item .nav-link:hover {
-  background-color: white;
-  color: black !important;
+  width:100px;
+  color: #e0e0e0 !important;
+  border-radius: 50px;
+  background: #ff3547;
+}
+
+.main-nav-active{
+  width:100px;
+  border-radius: 50px;
+  background: #ff3547 !important;
 }