Link user menu to the signed-in user's profile page

web/frontend/app/components/ui/navbar/Navbar.stories.tsx

@@ -47,6 +47,7 @@ export const Authenticated: Story = {
         const userButton = canvas.getByRole('button', { name: /hans/i });
         await expect(userButton).toBeInTheDocument();
         await userEvent.click(userButton);
+        await expect(canvas.getByRole('menuitem', { name: /my profile/i })).toBeInTheDocument();
         await expect(canvas.getByRole('menuitem', { name: /dashboard/i })).toBeInTheDocument();
         await expect(canvas.getByRole('menuitem', { name: /logout/i })).toBeInTheDocument();
     },

web/frontend/app/components/ui/navbar/Navbar.tsx

@@ -72,7 +72,10 @@ const Navbar = ({ auth }: NavbarProps) => (
                                     Dashboard
                                 </Link>
 
-                                <UserMenu username={auth.username} />
+                                <UserMenu
+                                    username={auth.username}
+                                    userAccountId={auth.userAccountId}
+                                />
                             </>
                         ) : (
                             <Link to="/login" className="btn btn-primary btn-sm">

web/frontend/app/components/ui/navbar/UserMenu.tsx

@@ -3,12 +3,20 @@ import { Link } from 'react-router';
 
 interface UserMenuProps {
     username: string;
+    userAccountId: string;
 }
 
-const UserMenu = ({ username }: UserMenuProps) => (
+const UserMenu = ({ username, userAccountId }: UserMenuProps) => (
     <Menu as="div" className="relative">
         <MenuButton className="btn btn-ghost btn-sm">{username}</MenuButton>
         <MenuItems className="menu absolute right-0 z-60 mt-2 w-52 rounded-box border border-base-300 bg-base-100 p-2 shadow-xl focus:outline-none">
+            <MenuItem>
+                {({ focus }) => (
+                    <Link to={`/users/${userAccountId}`} className={focus ? 'active' : ''}>
+                        My profile
+                    </Link>
+                )}
+            </MenuItem>
             <MenuItem>
                 {({ focus }) => (
                     <Link to="/dashboard" className={focus ? 'active' : ''}>