Add header router link

Author: realstoman

src/components/AppHeader.js

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import logoLight from '../images/logo-light.svg';
 import logoDark from '../images/logo-dark.svg';
 
@@ -10,13 +12,13 @@ const AppHeader = () => {
 					{/* Header menu links and small screen hamburger menu start */}
 					<div className="flex justify-between items-center px-4 sm:px-0">
 						<div>
-							<a href="/">
+							<Link to="/">
 								<img
 									src={logoDark}
 									className="w-36"
 									alt="Dark Logo"
 								/>
-							</a>
+							</Link>
 						</div>
 
 						{/* Theme switcher small screen end */}
@@ -53,27 +55,27 @@ const AppHeader = () => {
 
 					{/* Header links start*/}
 					<div className="m-0 sm:ml-4 mt-5 sm:mt-3 sm:flex p-5 sm:p-0 justify-center items-center shadow-lg sm:shadow-none">
-						<a
-							href="/projects"
+						<Link
+							to="/projects"
 							className="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2"
 							aria-label="Projects"
 						>
 							Projects
-						</a>
-						<a
-							href="/about"
+						</Link>
+						<Link
+							to="/about"
 							className="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
 							aria-label="About Me"
 						>
 							About Me
-						</a>
-						<a
-							href="/contact"
+						</Link>
+						<Link
+							to="/contact"
 							className="block text-left text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  sm:mx-4 mb-2 sm:py-2 border-t-2 pt-3 sm:pt-2 sm:border-t-0 border-primary-light dark:border-secondary-dark"
 							aria-label="Contact"
 						>
 							Contact
-						</a>
+						</Link>
 						<div className="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark">
 							<button
 								className="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-4 py-2 mt-2"