Merge pull request #48 from the-collab-lab/ar-navbar-updates-issue-19

Ar navbar updates issue 19
the-collab-lab · Oct 2, 2024 · bb1a97f · bb1a97f
2 parents 75f72f8 + 89e9451
commit bb1a97f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -21,7 +21,10 @@ export const SignInButton = () => (
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
+	<button
+		type="button"
+		onClick={() => auth.signOut() && window.location.reload()}
+	>
 		Sign Out
 	</button>
 );

diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -44,7 +44,7 @@
 	padding-bottom: max(env(safe-area-inset-bottom), 1rem);
 	padding-top: 1rem;
 	place-content: center;
-	position: fixed;
+	/* position: fixed; */
 	width: 100%;
 }
 
@@ -53,6 +53,8 @@
 	flex-direction: row;
 	justify-content: space-evenly;
 	width: min(72ch, 100%);
+	/* position: fixed;
+	top: 0; */
 }
 
 .Nav-link {

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -27,10 +27,6 @@ export function Layout() {
 				<header className="Layout-header">
 					<h1>Smart shopping list</h1>
 				</header>
-				<main className="Layout-main">
-					{user ? <SignOutButton /> : <SignInButton />}
-					<Outlet />
-				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
 						<NavLink to="/" style={handleActive}>
@@ -44,8 +40,14 @@ export function Layout() {
 						<NavLink to="/manage-list" style={handleActive}>
 							Manage List
 						</NavLink>
+
+						{user ? <SignOutButton /> : <SignInButton />}
 					</div>
 				</nav>
+
+				<main className="Layout-main">
+					<Outlet />
+				</main>
 			</div>
 		</>
 	);