#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 <[email protected]> * 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 <[email protected]>
the-collab-lab · Aug 16, 2024 · 4ed6bf4 · 4ed6bf4
1 parent 9f85679
commit 4ed6bf4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 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,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>