style: update navbar to use react-bootstrap

Author: bbland1

src/components/AuthenticatedNavBar.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import { SignOutButton } from "../api";
+import Navbar from "react-bootstrap/Navbar";
+import Container from "react-bootstrap/Container";
 
 import "./AuthenticatedNavBar.css";
 
 export function AuthenticatedNavBar() {
 	return (
-		<nav className="Nav">
-			<div className="Nav-container">
+		<Navbar className="Nav">
+			<Container className="Nav-container">
 				<SignOutButton />
 				<NavLink to="/" className="Nav-link" aria-label="Home">
 					Home
@@ -22,7 +24,7 @@ export function AuthenticatedNavBar() {
 				>
 					Manage List
 				</NavLink>
-			</div>
-		</nav>
+			</Container>
+		</Navbar>
 	);
 }

src/views/Layout.tsx

@@ -16,7 +16,7 @@ export function Layout({ user }: Props) {
 				<header className="Layout-header">
 					<h1>Smart shopping list</h1>
 				</header>
-				<main className="Layout-main">
+				<main className="Layout-main vh-100">
 					<Outlet />
 					{!user && <SignInButton />}
 				</main>