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>