Sm dg style header navigation (#62)

* added icons and styled navbar and header * added logo * logo added, offblack added, background of header eggshell * added active state to navlinks to display which page is currently selected --------- Co-authored-by: Devina Gillis <[email protected]> Co-authored-by: Devina Gillis <[email protected]>
the-collab-lab · Apr 5, 2024 · e0388fa · e0388fa
1 parent d317f60
commit e0388fa
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/public/img/basket-buddy-logo.png b/public/img/basket-buddy-logo.png
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -23,7 +23,7 @@ export const SignInButton = () => (
  */
 export const SignOutButton = () => (
 	<button
-		className="bg-pale-green rounded-lg px-3 py-1 text-eggshell border-2 border-sage text-off-black"
+		className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black"
 		type="button"
 		onClick={() => auth.signOut()}
 	>

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,21 +1,28 @@
 import { Outlet, NavLink } from 'react-router-dom';
+import { IoHome, IoList, IoCreate } from 'react-icons/io5';
 
 import './Layout.css';
 import { auth } from '../api/config.js';
 import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
+import buddyLogo from '../../public/img/basket-buddy-logo.png';
 
 export function Layout() {
 	const { user } = useAuth();
+	const activeLink =
+		'Nav-link text-sage border-2 border-sage rounded-full bg-eggshell';
+	const link =
+		'Nav-link text-eggshell border-2 rounded-full border-vanilla  hover:text-sage hover:border-sage';
 	return (
 		<>
 			<div className="Layout">
-				<header className="Layout-header font-Rubik flex flex-col">
-					<h1>Smart shopping list</h1>
+				<header
+					className="Layout-header flex flex-col items-center  bg-eggshell font-Rubik
+				text-off-black"
+				>
+					<img className="md:w-1/3" src={buddyLogo} alt="Basket Buddy" />
 					{!!user ? (
 						<div>
-							<span className="mx-3">
-								Signed in as {auth.currentUser.displayName}
-							</span>
+							<span>Signed in as {auth.currentUser.displayName}</span>
 							<SignOutButton />
 						</div>
 					) : (
@@ -25,16 +32,25 @@ export function Layout() {
 				<main className="Layout-main">
 					<Outlet />
 				</main>
-				<nav className="Nav">
-					<div className="Nav-container">
-						<NavLink to="/" className="Nav-link">
-							Home
+				<nav className="Nav bg-brown">
+					<div className="Nav-container flex flex-row justify-around">
+						<NavLink
+							to="/"
+							className={({ isActive }) => (isActive ? activeLink : link)}
+						>
+							<IoHome alt="Home" />
 						</NavLink>
-						<NavLink to="/list" className="Nav-link">
-							List
+						<NavLink
+							to="/list"
+							className={({ isActive }) => (isActive ? activeLink : link)}
+						>
+							<IoList alt="List" />
 						</NavLink>
-						<NavLink to="/manage-list" className="Nav-link">
-							Manage List
+						<NavLink
+							to="/manage-list"
+							className={({ isActive }) => (isActive ? activeLink : link)}
+						>
+							<IoCreate alt="Manage List" />
 						</NavLink>
 					</div>
 				</nav>