feat: user profile customization: username, password, and avatar (#315)

frontend/src/app/[locale]/HeaderNavbarMenu.tsx

@@ -13,7 +13,7 @@ import {
   ListboxItem,
   Listbox,
 } from '@heroui/react';
-import { ArrowRightFromLine, ArrowRightToLine, File, Globe, MoveUpRight, PenTool } from 'lucide-react';
+import { ArrowRightFromLine, ArrowRightToLine, File, Globe, MoveUpRight, PenTool, Settings } from 'lucide-react';
 import DropdownAccount from './DropdownAccount';
 import DropdownLanguage from './DropdownLanguage';
 import { ThemeSwitch } from '@/components/ThemeSwitch';
@@ -31,6 +31,7 @@ type NabbarMenuMessages = {
   docs: string;
   roadmap: string;
   account: string;
+  profileSettings: string;
   signUp: string;
   signIn: string;
   signOut: string;
@@ -185,12 +186,27 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
               <ListboxItem
                 key="account"
                 title={messages.account}
-                startContent={<UserAvatar context={context} />}
+                startContent={
+                  <UserAvatar
+                    size={16}
+                    username={context.token?.user?.username}
+                    avatarPath={context.token?.user?.avatarPath}
+                  />
+                }
                 onPress={() => {
                   router.push('/account', { locale: locale });
                   setIsMenuOpen(false);
                 }}
               />
+              <ListboxItem
+                key="profile"
+                title={messages.profileSettings}
+                startContent={<Settings size={16} />}
+                onPress={() => {
+                  router.push('/account/settings', { locale: locale });
+                  setIsMenuOpen(false);
+                }}
+              />
               <ListboxItem
                 key="signout"
                 title={messages.signOut}