fix: updated nav bar to use NavLink component

Co-authored-by: Maha Ahmed <[email protected]>
the-collab-lab · Aug 14, 2024 · 07c5a8f · 07c5a8f
1 parent e79843a
commit 07c5a8f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -57,7 +57,6 @@
 
 .Nav-link {
 	--color-text: var(--color-accent);
-
 	color: var(--color-text);
 	font-size: 1.4em;
 	flex: 0 1 auto;

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, NavLink } from 'react-router-dom';
 import { useAuth, SignInButton, SignOutButton } from '../api/useAuth';
 
 import './Layout.css';
@@ -26,15 +26,30 @@ export function Layout() {
 				<nav className="Nav">
 					<div className="Nav-container">
 						{!!user ? <SignOutButton /> : <SignInButton />}
-						<button href="#" className="Nav-link">
+						<NavLink
+							to="/"
+							className={({ isActive, isPending, isTransitioning }) =>
+								`Nav-link ${isPending ? 'pending' : ''} ${isActive ? 'active' : ''} ${isTransitioning ? 'transitioning' : ''}`
+							}
+						>
 							Home
-						</button>
-						<button href="#" className="Nav-link">
+						</NavLink>
+						<NavLink
+							to="/list"
+							className={({ isActive, isPending, isTransitioning }) =>
+								`Nav-link ${isPending ? 'pending' : ''} ${isActive ? 'active' : ''} ${isTransitioning ? 'transitioning' : ''}`
+							}
+						>
 							List
-						</button>
-						<button href="#" className="Nav-link">
+						</NavLink>
+						<NavLink
+							to="/manage-list"
+							className={({ isActive, isPending, isTransitioning }) =>
+								`Nav-link ${isPending ? 'pending' : ''} ${isActive ? 'active' : ''} ${isTransitioning ? 'transitioning' : ''}`
+							}
+						>
 							Manage List
-						</button>
+						</NavLink>
 					</div>
 				</nav>
 			</div>