From 3cc5c41a9b601285390412917ae631f46a44bad1 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Mon, 1 Jun 2020 22:11:56 +0200
Subject: [PATCH] correct highlighting of navbar

---
 package.json    |  1 +
 src/App.js      | 18 ++++++++++++++----
 src/css/App.css | 11 +++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 src/css/App.css

diff --git a/package.json b/package.json
index a01a5cb..b8e47e8 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "eject": "react-scripts eject"
   },
   "proxy": "http://127.0.0.1:4000",
+  "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"
   },
diff --git a/src/App.js b/src/App.js
index 68380bc..35baef3 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/css/App.css b/src/css/App.css
new file mode 100644
index 0000000..c00403f
--- /dev/null
+++ b/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);
+}
\ No newline at end of file