Fakultas Ilmu Komputer UI

Commit decda333 authored by Jonathan's avatar Jonathan
Browse files

Merge branch 'jonathan' into 'master'

use NavLink on navbar and edit styling for navbar menu

See merge request functional-programming/diskuy-frontend!46
parents dec2fbb9 0bfaefc9
......@@ -4,10 +4,10 @@ import '../../styles/utility/Navbar.css';
import AuthService, { loggedIn } from '../../helpers/services/auth.service';
import { useInput } from '../../helpers/hooks/input-hook';
import { Link, withRouter } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
const Navbar = (props) => {
const { value: search, bind: bindSearch, reset: resetSearch } = useInput('');
const handleLogout = () => {
AuthService.logout();
window.location.reload();
......@@ -58,36 +58,58 @@ const Navbar = (props) => {
</form>
<ul className="navbar-nav ml-auto">
<li className="nav-item mr-auto">
<Link to="/page/1" className="nav-link">
<NavLink
exact
activeClassName="navbar--active"
className="nav-link"
to="/page/1"
>
<b>Threads</b>
</Link>
</NavLink>
</li>
<li className="nav-item mr-auto">
<Link to="/topic" className="nav-link">
<NavLink
exact
activeClassName="navbar--active"
className="nav-link"
to="/topic"
>
<b>Topics</b>
</Link>
</NavLink>
</li>
{loggedIn && (
<li className="nav-item mr-auto">
<Link
to={`/profile/${AuthService.getCurrentUsername()}/1`}
<NavLink
exact
activeClassName="navbar--active"
className="nav-link"
to={`/profile/${AuthService.getCurrentUsername()}/page/1`}
>
<b>Profile</b>
</Link>
</NavLink>
</li>
)}
{loggedIn ? (
<li className="nav-item mr-auto" onClick={handleLogout}>
<Link to="/login" className="nav-link">
<NavLink
exact
activeClassName="navbar--active"
className="nav-link"
to="/login"
>
<b>Logout</b>
</Link>
</NavLink>
</li>
) : (
<li className="nav-item mr-auto">
<Link to="/login" className="nav-link">
<NavLink
exact
activeClassName="navbar--active"
className="nav-link"
to="/login"
>
<b>Login</b>
</Link>
</NavLink>
</li>
)}
</ul>
......
......@@ -8,6 +8,10 @@
transition: 0.4s;
}
.nav-link:hover {
color: #DE6600!important;
}
.navbar-toggler {
padding: 0px;
line-height: 0px;
......@@ -50,6 +54,10 @@
color: #ffffff !important;
}
.navbar--active {
color: #DE6600!important;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.form-control {
min-width: 180px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment