asifagaria/OpenMediaCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correct highlighting of navbar

Browse Source
This commit is contained in:
Lukas Heiligenbrunner 2020-06-01 22:11:56 +02:00
parent 060348be9e
commit 3cc5c41a9b
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

18
src/App.js
View File

@ -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>

11
src/css/App.css Normal file
View File

@ -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);
}