From 4ed6bf4d37ef3ad6ecba2205cbf7a1709aabe8a5 Mon Sep 17 00:00:00 2001
From: Brianna <104288486+bbland1@users.noreply.github.com>
Date: Fri, 16 Aug 2024 19:41:46 -0400
Subject: [PATCH] #3 Updating app nav bar (#19)

* moved signin/out button into nav container mostly to make draft pr

* fix: updated nav bar to use NavLink component

Co-authored-by: Maha Ahmed <eternalmaha@users.noreply.github.com>

* remove the currently undeeded pending/transitioning

* update class names to use just Nav-link remove unneeded portions

* adding aria-label to the 3 nav links

---------

Co-authored-by: Maha Ahmed <eternalmaha@users.noreply.github.com>
---
 src/views/Layout.css |  1 -
 src/views/Layout.jsx | 20 ++++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/views/Layout.css b/src/views/Layout.css
index 85be734..e29a397 100644
--- 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
index 76e4976..a1964ad 100644
--- 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,17 +26,21 @@ export function Layout() {
 					<Outlet />
 				</main>
 				<nav className="Nav">
-					{!!user ? <SignOutButton /> : <SignInButton />}
 					<div className="Nav-container">
-						<button href="#" className="Nav-link">
+						{!!user ? <SignOutButton /> : <SignInButton />}
+						<NavLink to="/" className="Nav-link" aria-label="Home">
 							Home
-						</button>
-						<button href="#" className="Nav-link">
+						</NavLink>
+						<NavLink to="/list" className="Nav-link" aria-label="List">
 							List
-						</button>
-						<button href="#" className="Nav-link">
+						</NavLink>
+						<NavLink
+							to="/manage-list"
+							className="Nav-link"
+							aria-label="Manage List"
+						>
 							Manage List
-						</button>
+						</NavLink>
 					</div>
 				</nav>
 			</div>