From a084f326a54d3de9e05bb9ef8ea06fd7becd1a89 Mon Sep 17 00:00:00 2001
From: lcross2002 <liamdcross@outlook.com>
Date: Wed, 3 Apr 2024 19:47:45 +0100
Subject: [PATCH] swap links to navlinks
---
client/src/components/Header/Header.scss | 11 ++++++++++-
client/src/components/Header/Header.tsx | 24 ++++++++++++++++--------
2 files changed, 26 insertions(+), 9 deletions(-)
diff --git a/client/src/components/Header/Header.scss b/client/src/components/Header/Header.scss
index 61cfa62..370c82d 100644
--- a/client/src/components/Header/Header.scss
+++ b/client/src/components/Header/Header.scss
@@ -28,6 +28,15 @@
}
.nav-item {
+ padding: 4px;
margin-left: 0.5rem;
margin-right: 0.5rem;
-}
\ No newline at end of file
+}
+
+.nav-item-active {
+ padding: 4px;
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+ pointer-events: none;
+ background-color: white;
+}
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index 4128437..94a1e52 100644
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@@ -1,11 +1,19 @@
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
-import './Header.scss';
import { userToDashboard } from '../../helpers/UserType';
+import './Header.scss';
+
+type NavLinkRenderProps = { isActive: boolean };
function Header() {
const { isAuth, user } = useAuth();
+ const activeClass = (props: NavLinkRenderProps) => {
+ if (props.isActive)
+ return 'nav-item-active';
+ return 'nav-item';
+ };
+
return (
<>
<div className='header'>
@@ -13,17 +21,17 @@ function Header() {
<span className='header-title'>Airline Booking</span>
<nav className='nav'>
- <Link to={'/'} className='nav-item'>Home</Link>
+ <NavLink to={'/'} className={activeClass}>Home</NavLink>
{isAuth ?
<div>
- <Link to={userToDashboard(user)} className='nav-item'>Dashboard</Link>
- <Link to={'booking/query'} className='nav-item'>Book a Flight</Link>
- <Link to={'logout'} className='nav-item'>Logout</Link>
+ <NavLink to={userToDashboard(user)} className={activeClass} >Dashboard</NavLink>
+ <NavLink to={'booking/query'} className={activeClass}>Book a Flight</NavLink>
+ <NavLink to={'logout'} className={activeClass}>Logout</NavLink>
</div> :
<div>
- <Link to={'login'} className='nav-item'>Login</Link>
- <Link to={'register'} className='nav-item'>Register</Link>
+ <NavLink to={'login'} className={activeClass}>Login</NavLink>
+ <NavLink to={'register'} className={activeClass}>Register</NavLink>
</div>}
</nav>
</div>
--
GitLab