show user dropdown in navbar when user is logged in

packages/client/src/app/app.tsx

@@ -2,15 +2,16 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { useEffect } from 'react';
 import { Container } from 'react-bootstrap';
 import { Route, Routes } from 'react-router-dom';
+import { useAppDispatch } from '../core/hooks/app-dispatch.hook';
+import { authThunks } from '../features/auth/auth.thunks';
 import { BrowsePage } from '../pages/browse/browse.page';
 import { GamePage } from '../pages/game/game.page';
 import { HomePage } from '../pages/home/home.page';
 import { HostPage } from '../pages/host/host.page';
 import { LoginPage } from '../pages/login/login.page';
+import { ProfilePage } from '../pages/profile/profile.page';
 import { RegisterPage } from '../pages/register/register.page';
 import { NavigationBar } from './navigation-bar/navigation-bar';
-import { authThunks } from '../features/auth/auth.thunks';
-import { useAppDispatch } from '../core/hooks/app-dispatch.hook';
 
 export const App: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -27,6 +28,7 @@ export const App: React.FC = () => {
           <Route path="/" element={<HomePage />} />
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
           <Route path="/game" element={<GamePage />} />
           <Route path="/host" element={<HostPage />} />
           <Route path="/browse" element={<BrowsePage />} />

packages/client/src/app/navigation-bar/navigation-bar.tsx

@@ -1,18 +1,38 @@
-import { Container, Nav, Navbar } from 'react-bootstrap';
+import { Container, Nav, NavDropdown, Navbar } from 'react-bootstrap';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { useAppDispatch } from '../../core/hooks/app-dispatch.hook';
 import { authSelectors } from '../../features/auth/auth.selectors';
 import { authThunks } from '../../features/auth/auth.thunks';
 
-export const NavigationBar: React.FC = () => {
+const UserDropdown = () => {
   const dispatch = useAppDispatch();
-  const isLoggedIn = useSelector(authSelectors.selectIsLoggedIn);
+  const user = useSelector(authSelectors.selectUser);
 
   const handleLogout = () => {
     dispatch(authThunks.logoutUser());
   };
 
+  return (
+    <NavDropdown
+      title={user?.username}
+      id="nav-dropdown"
+      drop="down"
+      align="end"
+    >
+      <NavDropdown.Item as={Link} to="/profile">
+        Profile
+      </NavDropdown.Item>
+      <NavDropdown.Item data-testid="logout-btn" onClick={handleLogout}>
+        Logout
+      </NavDropdown.Item>
+    </NavDropdown>
+  );
+};
+
+export const NavigationBar: React.FC = () => {
+  const isLoggedIn = useSelector(authSelectors.selectIsLoggedIn);
+
   return (
     <Navbar bg="primary" data-bs-theme="dark" className="bg-body-tertiary">
       <Container>
@@ -30,9 +50,7 @@ export const NavigationBar: React.FC = () => {
         <Navbar.Collapse className="justify-content-end">
           <Nav>
             {isLoggedIn ? (
-              <Nav.Link data-testid="logout-btn" onClick={handleLogout}>
-                Logout
-              </Nav.Link>
+              <UserDropdown />
             ) : (
               <Nav.Link data-testid="login-btn" as={Link} to="/login">
                 Login

packages/client/src/pages/profile/profile.page.spec.tsx

@@ -0,0 +1,9 @@
+import { renderWithProviders } from '../../utils/test.utils';
+import { ProfilePage } from './profile.page';
+
+describe('Profile', () => {
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<ProfilePage />);
+    expect(baseElement).toBeTruthy();
+  });
+});

packages/client/src/pages/profile/profile.page.tsx

@@ -0,0 +1,5 @@
+import { Page } from '../page';
+
+export const ProfilePage: React.FC = () => {
+  return <Page title="Profile" authProtected></Page>;
+};