18. As a user, I want the navbar to be on the top of the page #34 (#37)

* updated the css for the navbar, app title, and user info

* changed icon link

* final changes

Author: khadijahnabil

index.html

@@ -10,7 +10,7 @@
 			name="description"
 			content="A smart shopping list that learns your purchase habits and makes suggestions, so you don't forget to buy what's important."
 		/>
-		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+		<link rel="icon" type="image/svg+xml" href="/public/app-icon.svg" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link

public/app-icon.svg

@@ -14,18 +14,28 @@
 }
 
 .Layout > * {
-	padding-inline: min(5dvw, 3.2rem);
 }
 
 .Layout-header {
 	background-color: var(--color-bg);
-	padding-bottom: 0.5rem;
-	padding-top: max(env(safe-area-inset-top), 1rem);
 	text-align: center;
+	background-color: #e7eaf6;
 }
 
-.Layout-header > h1 {
+.Layout-header > .login-user {
+	padding: 15px 30px;
+}
+
+.Layout-header > .Layout-title {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 30px;
 	margin: 0;
+	font-size: 50px;
+	color: #113f67;
+	padding: 0 30px 30px;
+	border-bottom: 1px solid var(--color-border);
 }
 
 .Layout-main {
@@ -36,15 +46,14 @@
 }
 
 .Nav {
-	background-color: var(--color-bg);
+	background-color: #113f67;
 	border-top: 1px solid var(--color-border);
-	bottom: 0;
 	display: flex;
 	flex-direction: row;
 	padding-bottom: max(env(safe-area-inset-bottom), 1rem);
 	padding-top: 1rem;
+	margin-bottom: 4rem;
 	place-content: center;
-	position: fixed;
 	width: 100%;
 }
 
@@ -56,8 +65,7 @@
 }
 
 .Nav-link {
-	--color-text: var(--color-accent);
-
+	--color-text: #e7eaf6;
 	color: var(--color-text);
 	font-size: 1.4em;
 	flex: 0 1 auto;
@@ -67,7 +75,13 @@
 	text-underline-offset: 0.1em;
 }
 
+.Nav-link:hover {
+	color: #e69500;
+	transition: all 0.3s ease-in-out;
+}
+
 .Nav-link.active {
+	color: #e69500;
 	text-decoration-thickness: 0.22em;
 	text-underline-offset: 0.1em;
 }

src/views/Layout.css

@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router-dom';
 
 import './Layout.css';
+import { FaShoppingBag, FaUser, FaUserMinus } from 'react-icons/fa';
 import { auth } from '../api/config.js';
 import { SignInButton, SignOutButton, useAuth } from '../api/useAuth.jsx';
 import { NavLink } from 'react-router-dom';
@@ -20,24 +21,27 @@ export function Layout() {
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
-					{!user ? (
-						<div>
-							<SignInButton />
-						</div>
-					) : (
-						<div>
-							<span>{user?.displayName}</span>
-							<SignOutButton />
-						</div>
-					)}
+					<div className="login-user">
+						{!user ? (
+							<div className="flex justify-end gap-5 items-center">
+								<FaUser />
+								<SignInButton />
+							</div>
+						) : (
+							<div className="flex justify-between">
+								<span>Welcome {user?.displayName}!</span>
+								<span className="flex justify-end gap-5 items-center">
+									<FaUserMinus />
+									<SignOutButton />
+								</span>
+							</div>
+						)}
+					</div>
+					<div className="Layout-title">
+						<FaShoppingBag />
+						<h1>Smart Shopping List</h1>
+					</div>
 				</header>
-				<main className="Layout-main">
-					<h1 className="my-3 text-center font-extrabold text-4xl">
-						{localStorage.getItem('list') || 'No list selected'}
-					</h1>
-					<Outlet />
-				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
 						<NavLink to="/" className="Nav-link">
@@ -51,7 +55,12 @@ export function Layout() {
 						</NavLink>
 					</div>
 				</nav>
-			</div>
+	<main className="Layout-main">
+					<h1 className="my-3 text-center font-extrabold text-4xl">
+						{localStorage.getItem('list') || 'No list selected'}
+					</h1>
+					<Outlet />
+				</main>
 		</>
 	);
 }