From 3371a13420a453d12a6c4bd153cd083f357187e2 Mon Sep 17 00:00:00 2001
From: phucmapcaumieu <phucmapcaumieu@gmail.com>
Date: Sun, 17 Sep 2023 20:41:10 +0700
Subject: [PATCH] use NavLink instead of Link to avoid using active class

---
 src/components/common/navBar.jsx        | 60 +++++++------------------
 src/components/common/styles/navBar.css |  2 +-
 src/pages/about.jsx                     |  2 +-
 src/pages/articles.jsx                  |  2 +-
 src/pages/contact.jsx                   |  2 +-
 src/pages/homepage.jsx                  |  2 +-
 src/pages/projects.jsx                  |  2 +-
 7 files changed, 22 insertions(+), 50 deletions(-)

diff --git a/src/components/common/navBar.jsx b/src/components/common/navBar.jsx
index 6768cb861..23d7b666e 100644
--- a/src/components/common/navBar.jsx
+++ b/src/components/common/navBar.jsx
@@ -1,61 +1,33 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 import "./styles/navBar.css";
 
-const NavBar = (props) => {
-	const { active } = props;
-
+const NavBar = () => {
 	return (
 		<React.Fragment>
 			<div className="nav-container">
 				<nav className="navbar">
 					<div className="nav-background">
 						<ul className="nav-list">
-							<li
-								className={
-									active === "home"
-										? "nav-item active"
-										: "nav-item"
-								}
-							>
-								<Link to="/">Home</Link>
+							<li className="nav-item">
+								<NavLink to="/">Home</NavLink>
 							</li>
-							<li
-								className={
-									active === "about"
-										? "nav-item active"
-										: "nav-item"
-								}
-							>
-								<Link to="/about">About</Link>
+
+							<li className="nav-item">
+								<NavLink to="/about">About</NavLink>
 							</li>
-							<li
-								className={
-									active === "projects"
-										? "nav-item active"
-										: "nav-item"
-								}
-							>
-								<Link to="/projects">Projects</Link>
+
+							<li className="nav-item">
+								<NavLink to="/projects">Projects</NavLink>
 							</li>
-							<li
-								className={
-									active === "articles"
-										? "nav-item active"
-										: "nav-item"
-								}
-							>
-								<Link to="/articles">Articles</Link>
+
+							<li className="nav-item">
+								<NavLink to="/articles">Articles</NavLink>
 							</li>
-							<li
-								className={
-									active === "contact"
-										? "nav-item active"
-										: "nav-item"
-								}
-							>
-								<Link to="/contact">Contact</Link>
+
+							<li className="nav-item">
+								<NavLink to="/contact">Contact</NavLink>
 							</li>
 						</ul>
 					</div>
diff --git a/src/components/common/styles/navBar.css b/src/components/common/styles/navBar.css
index 6614680ae..66bde451d 100644
--- a/src/components/common/styles/navBar.css
+++ b/src/components/common/styles/navBar.css
@@ -41,7 +41,7 @@
 	font-size: 80%;
 }
 
-.nav-item.active a {
+.active {
 	color: var(--link-color) !important;
 }
 
diff --git a/src/pages/about.jsx b/src/pages/about.jsx
index 8f49ef977..2c8aea532 100644
--- a/src/pages/about.jsx
+++ b/src/pages/about.jsx
@@ -30,7 +30,7 @@ const About = () => {
 			</Helmet>
 
 			<div className="page-content">
-				<NavBar active="about" />
+				<NavBar />
 				<div className="content-wrapper">
 					<div className="about-logo-container">
 						<div className="about-logo">
diff --git a/src/pages/articles.jsx b/src/pages/articles.jsx
index a66ad5940..09b3f443c 100644
--- a/src/pages/articles.jsx
+++ b/src/pages/articles.jsx
@@ -31,7 +31,7 @@ const Articles = () => {
 			</Helmet>
 
 			<div className="page-content">
-				<NavBar active="articles" />
+				<NavBar />
 				<div className="content-wrapper">
 					<div className="articles-logo-container">
 						<div className="articles-logo">
diff --git a/src/pages/contact.jsx b/src/pages/contact.jsx
index 7b73ae4bd..981ba2ebf 100644
--- a/src/pages/contact.jsx
+++ b/src/pages/contact.jsx
@@ -30,7 +30,7 @@ const Contact = () => {
 			</Helmet>
 
 			<div className="page-content">
-				<NavBar active="contact" />
+				<NavBar />
 				<div className="content-wrapper">
 					<div className="contact-logo-container">
 						<div className="contact-logo">
diff --git a/src/pages/homepage.jsx b/src/pages/homepage.jsx
index 3ee3de60e..9bcadc1e9 100644
--- a/src/pages/homepage.jsx
+++ b/src/pages/homepage.jsx
@@ -80,7 +80,7 @@ const Homepage = () => {
 			</Helmet>
 
 			<div className="page-content">
-				<NavBar active="home" />
+				<NavBar />
 				<div className="content-wrapper">
 					<div className="homepage-logo-container">
 						<div style={logoStyle}>
diff --git a/src/pages/projects.jsx b/src/pages/projects.jsx
index 9c423b230..b39f23837 100644
--- a/src/pages/projects.jsx
+++ b/src/pages/projects.jsx
@@ -30,7 +30,7 @@ const Projects = () => {
 			</Helmet>
 
 			<div className="page-content">
-				<NavBar active="projects" />
+				<NavBar />
 				<div className="content-wrapper">
 					<div className="projects-logo-container">
 						<div className="projects-logo">