Fakultas Ilmu Komputer UI

Commit 0bfaefc9 authored by Jonathan Chandra's avatar Jonathan Chandra
Browse files

use NavLink on navbar and edit styling for navbar menu

parent a7f66865
......@@ -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