correct highlighting of navbar

package.json

@@ -19,6 +19,7 @@
     "eject": "react-scripts eject"
   },
   "proxy": "http://127.0.0.1:4000",
+  "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"
   },

src/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import MainBody from "./MainBody";
+import "./css/App.css"
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -18,17 +19,26 @@ class App extends React.Component {
         return (
             <div className="App">
                 <nav className="navbar navbar-expand-sm bg-primary navbar-dark">
-                    <a className="navbar-brand" href="# ">Lukis Tube</a>
+                    <div className="navbar-brand">Lukis Tube</div>
 
                     <ul className="navbar-nav">
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.loadHomePage()} href='# '>Home</a>
+                            <div className="nav-link"
+                                 style={this.state.page === "default" ? {color: "rgba(255,255,255,.75"} : {}}
+                                 onClick={() => this.loadHomePage()}>Home
+                            </div>
                         </li>
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.loadRandomPage()} href="# ">Random Video</a>
+                            <div className="nav-link"
+                                 style={this.state.page === "random" ? {color: "rgba(255,255,255,.75"} : {}}
+                                 onClick={() => this.loadRandomPage()}>Random Video
+                            </div>
                         </li>
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.loadCategoriesPage()} href="# ">Categories</a>
+                            <div className="nav-link"
+                                 style={this.state.page === "categories" ? {color: "rgba(255,255,255,.75"} : {}}
+                                 onClick={() => this.loadCategoriesPage()}>Categories
+                            </div>
                         </li>
                     </ul>
                 </nav>

src/css/App.css

@@ -0,0 +1,11 @@
+.nav-item{
+    cursor: pointer;
+}
+.nav-link{
+    color: rgba(255,255,255,.5);
+    font-weight: bold;
+}
+
+.nav-link:hover{
+    color: rgba(255,255,255,1);
+}