AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 10:04:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aaron Po
2026-09-12 15:09:35 -04:00
parent 6f1dfce625
commit 84232b5a47
3 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/frontend/app/components/ui/navbar/Navbar.stories.tsx
View File

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

5
web/frontend/app/components/ui/navbar/Navbar.tsx
View File

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

10
web/frontend/app/components/ui/navbar/UserMenu.tsx
View File

@@ -3,12 +3,20 @@ import { Link } from 'react-router';
interface UserMenuProps { interface UserMenuProps {
username: string; username: string;
userAccountId: string;
} }
const UserMenu = ({ username }: UserMenuProps) => ( const UserMenu = ({ username, userAccountId }: UserMenuProps) => (
<Menu as="div" className="relative"> <Menu as="div" className="relative">
<MenuButton className="btn btn-ghost btn-sm">{username}</MenuButton> <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"> <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> <MenuItem>
{({ focus }) => ( {({ focus }) => (
<Link to="/dashboard" className={focus ? 'active' : ''}> <Link to="/dashboard" className={focus ? 'active' : ''}>