fix: Adjust Appearance of drawer

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

@@ -1,11 +1,11 @@
 'use client';
 import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@nextui-org/react';
-import { User, ChevronDown, PenTool, ArrowRightFromLine, ArrowRightToLine } from 'lucide-react';
+import { ChevronDown, PenTool, ArrowRightFromLine, ArrowRightToLine } from 'lucide-react';
 import { useContext } from 'react';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useRouter } from '@/src/navigation';
 import { AccountDropDownMessages } from '@/types/user';
-import Avatar from 'boring-avatars';
+import UserAvatar from '@/components/UserAvatar';
 
 type Props = {
   messages: AccountDropDownMessages;
@@ -23,22 +23,11 @@ export default function DropdownAccount({ messages, locale, onItemPress }: Props
     router.push(`/`, { locale: locale });
   };
 
-  let userAvatar = context.isSignedIn() ? (
-    <Avatar
-      size={16}
-      name={context.token.user.username}
-      variant="beam"
-      colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
-    />
-  ) : (
-    <User size={16} />
-  );
-
   const signinItems = [
     {
       uid: 'account',
       title: messages.account,
-      icon: userAvatar,
+      icon: <UserAvatar context={context} />,
       onPress: () => {
         router.push('/account', { locale: locale });
         onItemPress();
@@ -79,7 +68,12 @@ export default function DropdownAccount({ messages, locale, onItemPress }: Props
   return (
     <Dropdown>
       <DropdownTrigger>
-        <Button size="sm" variant="light" startContent={userAvatar} endContent={<ChevronDown size={16} />}>
+        <Button
+          size="sm"
+          variant="light"
+          startContent={<UserAvatar context={context} />}
+          endContent={<ChevronDown size={16} />}
+        >
           {context.isSignedIn() ? context.token.user.username : messages.signIn}
         </Button>
       </DropdownTrigger>

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

@@ -1,40 +1,24 @@
 'use client';
 import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@nextui-org/react';
 import { Globe, ChevronDown } from 'lucide-react';
-import { usePathname } from 'next/navigation';
-import { useRouter } from '@/src/navigation';
+import { locales } from '@/config/selection';
 
-const locales = [
-  { code: 'en', name: 'English' },
-  { code: 'ja', name: '日本語' },
-];
-
-export default function DropdownLanguage(params: { locale: string }) {
-  const router = useRouter();
-  const pathname = usePathname();
-
-  async function changeLocale(nextLocale: string) {
-    let newPathname;
-    if (pathname.length < 4) {
-      // when root path
-      router.push('/', { locale: nextLocale });
-    } else {
-      // when not root path, trim first "/en" from pathname = "/en/projects"
-      newPathname = pathname.slice(params.locale.length + 1);
-      router.push(newPathname, { locale: nextLocale });
-    }
-  }
+type Props = {
+  locale: string;
+  onChangeLocale: (code: string) => void;
+};
 
+export default function DropdownLanguage({ locale, onChangeLocale }: Props) {
   return (
     <Dropdown>
       <DropdownTrigger>
         <Button size="sm" variant="light" startContent={<Globe size={16} />} endContent={<ChevronDown size={16} />}>
-          {locales.find((locale) => locale.code === params.locale)?.name || params.locale}
+          {locales.find((entry) => entry.code === locale)?.name || locale}
         </Button>
       </DropdownTrigger>
       <DropdownMenu aria-label="lacales">
         {locales.map((entry) => (
-          <DropdownItem key={entry.code} onClick={() => changeLocale(entry.code)}>
+          <DropdownItem key={entry.code} onClick={() => onChangeLocale(entry.code)}>
             {entry.name}
           </DropdownItem>
         ))}

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

@@ -11,6 +11,8 @@ export default function Header(params: { locale: string }) {
     signUp: t('signup'),
     signIn: t('signin'),
     signOut: t('signout'),
+    links: t('links'),
+    languages: t('languages'),
   };
 
   return <HeaderNavbarMenu messages={messages} locale={params.locale} />;

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

@@ -1,7 +1,8 @@
 'use client';
 import { useState, useContext } from 'react';
 import { TokenContext } from '@/utils/TokenProvider';
-import { Link } from '@/src/navigation';
+import { Link, useRouter } from '@/src/navigation';
+import { usePathname } from 'next/navigation';
 import Image from 'next/image';
 import {
   Navbar,
@@ -10,15 +11,18 @@ import {
   NavbarMenuToggle,
   NavbarBrand,
   NavbarItem,
-  NavbarMenuItem,
   Link as NextUiLink,
   Chip,
+  ListboxItem,
+  Listbox,
 } from '@nextui-org/react';
-import { MoveUpRight } from 'lucide-react';
+import { ArrowRightFromLine, ArrowRightToLine, File, Globe, MoveUpRight, PenTool } from 'lucide-react';
 import { ThemeSwitch } from '@/components/theme-switch';
 import { GithubIcon } from '@/components/icons';
+import { locales } from '@/config/selection';
 import DropdownAccount from './DropdownAccount';
 import DropdownLanguage from './DropdownLanguage';
+import UserAvatar from '@/components/UserAvatar';
 
 type NabbarMenuMessages = {
   projects: string;
@@ -28,6 +32,8 @@ type NabbarMenuMessages = {
   signUp: string;
   signIn: string;
   signOut: string;
+  links: string;
+  languages: string;
 };
 
 type Props = {
@@ -54,6 +60,20 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
     },
   ];
 
+  const router = useRouter();
+  const pathname = usePathname();
+  async function changeLocale(nextLocale: string) {
+    let newPathname;
+    if (pathname.length < 4) {
+      // when root path
+      router.push('/', { locale: nextLocale });
+    } else {
+      // when not root path, trim first "/en" from pathname = "/en/projects"
+      newPathname = pathname.slice(locale.length + 1);
+      router.push(newPathname, { locale: nextLocale });
+    }
+  }
+
   return (
     <Navbar isMenuOpen={isMenuOpen} maxWidth="full" position="sticky" className="bg-inherit">
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
@@ -115,44 +135,120 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
         <ThemeSwitch />
         <div className="hidden md:block">
           <DropdownAccount messages={messages} locale={locale} onItemPress={() => {}} />
-          <DropdownLanguage locale={locale} />
+          <DropdownLanguage locale={locale} onChangeLocale={changeLocale} />
         </div>
         <NavbarMenuToggle className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)} />
       </NavbarContent>
 
       <NavbarMenu>
         <div className="mx-4 mt-2 flex flex-col gap-2">
-          <NavbarMenuItem>
-            <DropdownAccount messages={messages} locale={locale} onItemPress={() => setIsMenuOpen(false)} />
-          </NavbarMenuItem>
-          <NavbarMenuItem>
-            <DropdownLanguage locale={locale} />
-          </NavbarMenuItem>
-          {commonLinks.map((link) =>
-            link.isExternal ? (
-              <NavbarMenuItem key={link.uid}>
-                <NextUiLink
-                  href={link.href}
-                  onPress={() => setIsMenuOpen(false)}
-                  showAnchorIcon
-                  anchorIcon={<MoveUpRight size={12} className="ms-1" />}
-                >
-                  {messages.docs}
-                </NextUiLink>
-              </NavbarMenuItem>
-            ) : (
-              <NavbarMenuItem key={link.uid}>
-                <Link
-                  className="data-[active=true]:text-primary data-[active=true]:font-medium"
-                  href={link.href}
-                  locale={locale}
-                  onClick={() => setIsMenuOpen(false)}
-                >
-                  {link.label}
-                </Link>
-              </NavbarMenuItem>
-            )
+          <p className="font-bold">{messages.links}</p>
+          <Listbox
+            aria-label="Links"
+            itemClasses={{
+              base: 'h-10 text-large',
+            }}
+          >
+            {commonLinks.map((link) =>
+              link.isExternal ? (
+                <ListboxItem
+                  key={link.uid}
+                  title={link.label}
+                  startContent={<MoveUpRight size={12} />}
+                  onPress={() => {
+                    router.push(link.href, { locale: locale });
+                    setIsMenuOpen(false);
+                  }}
+                />
+              ) : (
+                <ListboxItem
+                  key={link.uid}
+                  title={link.label}
+                  startContent={<File size={12} />}
+                  onPress={() => {
+                    router.push(link.href, { locale: locale });
+                    setIsMenuOpen(false);
+                  }}
+                />
+              )
+            )}
+          </Listbox>
+
+          <p className="font-bold">{messages.account}</p>
+          {context.isSignedIn() ? (
+            <Listbox
+              aria-label="Account links"
+              itemClasses={{
+                base: 'h-10 text-large',
+              }}
+            >
+              <ListboxItem
+                key="account"
+                title={messages.account}
+                startContent={<UserAvatar context={context} />}
+                onPress={() => {
+                  router.push('/account', { locale: locale });
+                  setIsMenuOpen(false);
+                }}
+              />
+              <ListboxItem
+                key="signout"
+                title={messages.signOut}
+                startContent={<ArrowRightFromLine size={16} />}
+                onPress={() => {
+                  context.setToken(null);
+                  context.removeTokenFromLocalStorage();
+                  router.push(`/`, { locale: locale });
+                  setIsMenuOpen(false);
+                }}
+              />
+            </Listbox>
+          ) : (
+            <Listbox
+              aria-label="Account links"
+              itemClasses={{
+                base: 'h-10 text-large',
+              }}
+            >
+              <ListboxItem
+                key="signin"
+                startContent={<ArrowRightToLine size={16} />}
+                title={messages.signIn}
+                onClick={() => {
+                  router.push('/account/signin', { locale: locale });
+                  setIsMenuOpen(false);
+                }}
+              />
+              <ListboxItem
+                key="signup"
+                title={messages.signUp}
+                startContent={<PenTool size={16} />}
+                onClick={() => {
+                  router.push('/account/signup', { locale: locale });
+                  setIsMenuOpen(false);
+                }}
+              />
+            </Listbox>
           )}
+          <p className="font-bold">{messages.languages}</p>
+          <Listbox
+            aria-label="Language links"
+            itemClasses={{
+              base: 'h-10 text-large',
+            }}
+          >
+            {locales.map((entry) => (
+              <ListboxItem
+                key={entry.code}
+                startContent={<Globe size={16} />}
+                title={entry.name}
+                onClick={() => {
+                  changeLocale(entry.code);
+                  setIsMenuOpen(false);
+                }}
+              />
+            ))}
+          </Listbox>
         </div>
       </NavbarMenu>
     </Navbar>