From 0bfaefc9a548a2024898f50ff7f8a1bb646173ab Mon Sep 17 00:00:00 2001
From: Jonathan Chandra <jonathanjocan@gmail.com>
Date: Thu, 25 Feb 2021 17:16:06 +0700
Subject: [PATCH] use NavLink on navbar and edit styling for navbar menu

---
 src/components/utility/Navbar.jsx | 46 +++++++++++++++++++++++--------
 src/styles/utility/Navbar.css     |  8 ++++++
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/utility/Navbar.jsx b/src/components/utility/Navbar.jsx
index e7bf55b..a6f8038 100644
--- a/src/components/utility/Navbar.jsx
+++ b/src/components/utility/Navbar.jsx
@@ -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>
diff --git a/src/styles/utility/Navbar.css b/src/styles/utility/Navbar.css
index 94de160..26db33f 100644
--- a/src/styles/utility/Navbar.css
+++ b/src/styles/utility/Navbar.css
@@ -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;
-- 
GitLab