fix: fixing the new UnauthenticatedNavBar to use the correct bootstra…

…p comp since didn't get them in conflict resolve

src/components/unauthenticated/UnauthenticatedNavBar.tsx

@@ -1,19 +1,27 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
+import Navbar from "react-bootstrap/Navbar";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
 
 import "../NavBar.css";
 
 export function UnauthenticatedNavBar() {
 	return (
-		<nav className="Nav">
-			<div className="Nav-container">
-				<NavLink to="/" className="Nav-link" aria-label="Home">
+		<Navbar expand="lg" fixed="bottom" className="Nav">
+			<Container className="d-flex justify-content-around Nav-container">
+				<Nav.Link as={NavLink} to="/" className="Nav-link" aria-label="Home">
 					Home
-				</NavLink>
-				<NavLink to="/about" className="Nav-link" aria-label="About">
+				</Nav.Link>
+				<Nav.Link
+					as={NavLink}
+					to="/about"
+					className="Nav-link"
+					aria-label="About"
+				>
 					About
-				</NavLink>
-			</div>
-		</nav>
+				</Nav.Link>
+			</Container>
+		</Navbar>
 	);
 }

src/views/Layout.tsx

@@ -14,7 +14,7 @@ export function Layout({ user }: Props) {
 	const navigate = useNavigate();
 	return (
 		<>
-			<div className="Layout  vh-100">
+			<div className="Layout vh-100">
 				<header className="Layout-header">
 					<h1>Smart shopping list</h1>
 				</header>
@@ -23,6 +23,7 @@ export function Layout({ user }: Props) {
 						<Button
 							onClick={() => navigate("/about")}
 							aria-label="Navigate to the about application page."
+							className="m-2"
 						>
 							about
 						</Button>