Merge pull request #73 from the-collab-lab/nav-styling-gb

Nav Menu Styling

Author: granolagabrielle

src/components/SingleList.css

@@ -3,6 +3,7 @@
 	display: flex;
 	flex-direction: row;
 	font-size: 1.2em;
+	padding: 0.05em;
 }
 
 .SingleList-label {

src/views/Home.jsx

@@ -35,9 +35,6 @@ export function Home({ data, setListPath, userId, userEmail }) {
 
 	return (
 		<div className="Home">
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
 			<form id="list-form" onSubmit={handleSubmit}>
 				<TextInputElement
 					key="list-name"

src/views/Layout.css

@@ -11,6 +11,7 @@
 	display: flex;
 	flex-direction: column;
 	height: 100dvh;
+	padding-top: 80px;
 }
 
 .Layout > * {
@@ -31,43 +32,42 @@
 .Layout-main {
 	margin: 0 auto;
 	padding-block: 0;
-	padding-block-end: 6.26rem;
+	padding-block-start: 4rem;
 	width: min(72ch, 100%);
 }
 
 .Nav {
 	background-color: var(--color-bg);
-	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;
+	top: 0;
+	left: 0;
+	padding: 10px 20px;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 	place-content: center;
 	position: fixed;
 	width: 100%;
+	color: white;
 }
 
 .Nav-container {
 	display: flex;
-	flex-direction: row;
-	justify-content: space-evenly;
-	width: min(72ch, 100%);
+	align-items: center;
 }
 
 .Nav-link {
-	--color-text: var(--color-accent);
-
-	color: var(--color-text);
-	font-size: 1.4em;
+	color: #2588f2;
+	font-size: 1em;
 	flex: 0 1 auto;
-	line-height: 1;
 	padding: 0.8rem;
 	text-align: center;
-	text-underline-offset: 0.1em;
+	text-decoration: none;
 }
 
 .Nav-link.active {
-	text-decoration-thickness: 0.22em;
-	text-underline-offset: 0.1em;
+	background-color: #becfe1;
+	border-radius: 4px;
+}
+
+.App-title {
+	padding-right: 15px;
+	font-weight: bold;
 }

src/views/Layout.jsx

@@ -19,15 +19,13 @@ export function Layout() {
 	return (
 		<>
 			<div className="Layout">
-				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
-				</header>
 				<a>{user ? <SignOutButton /> : <SignInButton />}</a>
 				<main className="Layout-main">
 					<Outlet />
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
+						<div className="App-title">Shopping List</div>
 						<NavLink to="/" end className="Nav-link">
 							Home
 						</NavLink>

tests/Layout.test.jsx

@@ -22,7 +22,6 @@ describe('Layout Component', () => {
 			</MemoryRouter>,
 		);
 
-		expect(screen.getByText('Smart shopping list')).toBeInTheDocument();
 		expect(screen.getByText('Home')).toBeInTheDocument();
 		expect(screen.getByText('List')).toBeInTheDocument();
 		expect(screen.getByText('Manage List')).toBeInTheDocument();