From 704f20239e53d8d3d9ddecd433c1b4fa1039e6c9 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Tue, 21 May 2024 21:47:19 +0900
Subject: [PATCH] Fixed drawer not closing when a link in a drawer is pressed

---
 frontend/src/app/[locale]/DropdownAccount.tsx |  11 +-
 frontend/src/app/[locale]/Header.tsx          | 128 +--------------
 .../src/app/[locale]/HeaderNavbarMenu.tsx     | 146 ++++++++++++++++++
 .../src/app/[locale]/account/authControl.ts   |   1 -
 4 files changed, 159 insertions(+), 127 deletions(-)
 create mode 100644 frontend/src/app/[locale]/HeaderNavbarMenu.tsx

diff --git a/frontend/src/app/[locale]/DropdownAccount.tsx b/frontend/src/app/[locale]/DropdownAccount.tsx
index d87380a..cfcf847 100644
--- a/frontend/src/app/[locale]/DropdownAccount.tsx
+++ b/frontend/src/app/[locale]/DropdownAccount.tsx
@@ -9,9 +9,10 @@ import { AccountDropDownMessages } from '@/types/user';
 type Props = {
   messages: AccountDropDownMessages;
   locale: string;
+  onItemPress: () => void;
 };
 
-export default function DropdownAccount({ messages, locale }: Props) {
+export default function DropdownAccount({ messages, locale, onItemPress }: Props) {
   const router = useRouter();
   const context = useContext(TokenContext);
 
@@ -28,13 +29,17 @@ export default function DropdownAccount({ messages, locale }: Props) {
       icon: <User size={16} />,
       onPress: () => {
         router.push('/account', { locale: locale });
+        onItemPress();
       },
     },
     {
       uid: 'signout',
       title: messages.signOut,
       icon: <ArrowRightFromLine size={16} />,
-      onPress: signOut,
+      onPress: () => {
+        signOut();
+        onItemPress();
+      },
     },
   ];
 
@@ -45,6 +50,7 @@ export default function DropdownAccount({ messages, locale }: Props) {
       icon: <ArrowRightToLine size={16} />,
       onPress: () => {
         router.push('/account/signin', { locale: locale });
+        onItemPress();
       },
     },
     {
@@ -53,6 +59,7 @@ export default function DropdownAccount({ messages, locale }: Props) {
       icon: <PenTool size={16} />,
       onPress: () => {
         router.push('/account/signup', { locale: locale });
+        onItemPress();
       },
     },
   ];
diff --git a/frontend/src/app/[locale]/Header.tsx b/frontend/src/app/[locale]/Header.tsx
index c9de76c..2e364f2 100644
--- a/frontend/src/app/[locale]/Header.tsx
+++ b/frontend/src/app/[locale]/Header.tsx
@@ -1,136 +1,16 @@
-import {
-  Navbar as NextUINavbar,
-  NavbarContent,
-  NavbarMenu,
-  NavbarMenuToggle,
-  NavbarBrand,
-  NavbarItem,
-  NavbarMenuItem,
-  Chip,
-  Link as NextUiLink,
-} from '@nextui-org/react';
-import { MoveUpRight } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { Link } from '@/src/navigation';
-import { ThemeSwitch } from '@/components/theme-switch';
-import { GithubIcon } from '@/components/icons';
-import Image from 'next/image';
-import DropdownAccount from './DropdownAccount';
-import DropdownLanguage from './DropdownLanguage';
+import HeaderNavbarMenu from './HeaderNavbarMenu';
 
 export default function Header(params: { locale: string }) {
   const t = useTranslations('Header');
   const messages = {
+    docs: t('docs'),
+    projects: t('projects'),
     account: t('account'),
     signUp: t('signup'),
     signIn: t('signin'),
     signOut: t('signout'),
   };
 
-  // Links shown Header or slider
-  const commonLinks = [
-    {
-      uid: 'projects',
-      href: '/projects',
-      label: t('projects'),
-      isExternal: false,
-    },
-    {
-      uid: 'docs',
-      href: 'https://kimatata.github.io/TestPlat/docs/getstarted/selfhost',
-      label: t('docs'),
-      isExternal: true,
-    },
-  ];
-
-  return (
-    <NextUINavbar maxWidth="full" position="sticky" className="bg-inherit">
-      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
-        <NavbarBrand as="li" className="gap-3 max-w-fit">
-          <Link className="flex justify-start items-center gap-1" href="/" locale={params.locale}>
-            <Image src="/favicon/android-chrome-192x192.png" width={32} height={32} alt="Logo" />
-            <p className="font-bold text-inherit">TestPlat</p>
-          </Link>
-        </NavbarBrand>
-        <NavbarItem className="hidden md:block">
-          <Chip size="sm" variant="flat">
-            <Link
-              className="data-[active=true]:text-primary data-[active=true]:font-medium"
-              href="/"
-              locale={params.locale}
-            >
-              1.0.0-alpha.7
-            </Link>
-          </Chip>
-        </NavbarItem>
-        {commonLinks.map((link) =>
-          link.isExternal ? (
-            <NavbarItem key={link.uid} className="hidden md:block">
-              <NextUiLink
-                isExternal
-                href="https://kimatata.github.io/TestPlat/docs/getstarted/selfhost"
-                aria-label="docs"
-                showAnchorIcon
-                anchorIcon={<MoveUpRight size={12} className="ms-1" />}
-              >
-                {t('docs')}
-              </NextUiLink>
-            </NavbarItem>
-          ) : (
-            <NavbarItem key={link.uid} className="hidden md:block">
-              <Link
-                className="data-[active=true]:text-primary data-[active=true]:font-medium"
-                href={link.href}
-                locale={params.locale}
-              >
-                {link.label}
-              </Link>
-            </NavbarItem>
-          )
-        )}
-      </NavbarContent>
-
-      <NavbarContent className="basis-1 pl-4" justify="end">
-        <NextUiLink isExternal href="https://github.com/kimatata/TestPlat" aria-label="Github">
-          <GithubIcon className="text-default-500" />
-        </NextUiLink>
-        <ThemeSwitch />
-        <div className="hidden md:block">
-          <DropdownAccount messages={messages} locale={params.locale} />
-          <DropdownLanguage locale={params.locale} />
-        </div>
-        <NavbarMenuToggle className="md:hidden" />
-      </NavbarContent>
-
-      <NavbarMenu>
-        <div className="mx-4 mt-2 flex flex-col gap-2">
-          <NavbarMenuItem>
-            <DropdownAccount messages={messages} locale={params.locale} />
-          </NavbarMenuItem>
-          <NavbarMenuItem>
-            <DropdownLanguage locale={params.locale} />
-          </NavbarMenuItem>
-          {commonLinks.map((link) =>
-            link.isExternal ? (
-              <NavbarMenuItem key={link.uid}>
-                <NextUiLink href={link.href} showAnchorIcon anchorIcon={<MoveUpRight size={12} className="ms-1" />}>
-                  {t('docs')}
-                </NextUiLink>
-              </NavbarMenuItem>
-            ) : (
-              <NavbarMenuItem key={link.uid}>
-                <Link
-                  className="data-[active=true]:text-primary data-[active=true]:font-medium"
-                  href={link.href}
-                  locale={params.locale}
-                >
-                  {link.label}
-                </Link>
-              </NavbarMenuItem>
-            )
-          )}
-        </div>
-      </NavbarMenu>
-    </NextUINavbar>
-  );
+  return <HeaderNavbarMenu messages={messages} locale={params.locale} />;
 }
diff --git a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
new file mode 100644
index 0000000..2e2dcfc
--- /dev/null
+++ b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
@@ -0,0 +1,146 @@
+'use client';
+import { useState } from 'react';
+import { Link } from '@/src/navigation';
+import Image from 'next/image';
+import {
+  Navbar,
+  NavbarContent,
+  NavbarMenu,
+  NavbarMenuToggle,
+  NavbarBrand,
+  NavbarItem,
+  NavbarMenuItem,
+  Link as NextUiLink,
+  Chip,
+} from '@nextui-org/react';
+import { MoveUpRight } from 'lucide-react';
+import { ThemeSwitch } from '@/components/theme-switch';
+import { GithubIcon } from '@/components/icons';
+import DropdownAccount from './DropdownAccount';
+import DropdownLanguage from './DropdownLanguage';
+
+type NabbarMenuMessages = {
+  projects: string;
+  docs: string;
+  account: string;
+  signUp: string;
+  signIn: string;
+  signOut: string;
+};
+
+type Props = {
+  messages: NabbarMenuMessages;
+  locale: string;
+};
+
+export default function HeaderNavbarMenu({ messages, locale }: Props) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const commonLinks = [
+    {
+      uid: 'projects',
+      href: '/projects',
+      label: messages.projects,
+      isExternal: false,
+    },
+    {
+      uid: 'docs',
+      href: 'https://kimatata.github.io/TestPlat/docs/getstarted/selfhost',
+      label: messages.docs,
+      isExternal: true,
+    },
+  ];
+
+  return (
+    <Navbar isMenuOpen={isMenuOpen} maxWidth="full" position="sticky" className="bg-inherit">
+      <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
+        <NavbarBrand as="li" className="gap-3 max-w-fit">
+          <Link className="flex justify-start items-center gap-1" href="/" locale={locale}>
+            <Image src="/favicon/android-chrome-192x192.png" width={32} height={32} alt="Logo" />
+            <p className="font-bold text-inherit">TestPlat</p>
+          </Link>
+        </NavbarBrand>
+        <NavbarItem className="hidden md:block">
+          <Chip size="sm" variant="flat">
+            <Link className="data-[active=true]:text-primary data-[active=true]:font-medium" href="/" locale={locale}>
+              1.0.0-alpha.7
+            </Link>
+          </Chip>
+        </NavbarItem>
+        {commonLinks.map((link) =>
+          link.isExternal ? (
+            <NavbarItem key={link.uid} className="hidden md:block">
+              <NextUiLink
+                isExternal
+                href="https://kimatata.github.io/TestPlat/docs/getstarted/selfhost"
+                aria-label="docs"
+                showAnchorIcon
+                anchorIcon={<MoveUpRight size={12} className="ms-1" />}
+              >
+                {messages.docs}
+              </NextUiLink>
+            </NavbarItem>
+          ) : (
+            <NavbarItem key={link.uid} className="hidden md:block">
+              <Link
+                className="data-[active=true]:text-primary data-[active=true]:font-medium"
+                href={link.href}
+                locale={locale}
+              >
+                {link.label}
+              </Link>
+            </NavbarItem>
+          )
+        )}
+      </NavbarContent>
+
+      <NavbarContent className="basis-1 pl-4" justify="end">
+        <NextUiLink isExternal href="https://github.com/kimatata/TestPlat" aria-label="Github">
+          <GithubIcon className="text-default-500" />
+        </NextUiLink>
+        <ThemeSwitch />
+        <div className="hidden md:block">
+          <DropdownAccount messages={messages} locale={locale} onItemPress={() => {}} />
+          <DropdownLanguage locale={locale} />
+        </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>
+            )
+          )}
+        </div>
+      </NavbarMenu>
+    </Navbar>
+  );
+}
diff --git a/frontend/src/app/[locale]/account/authControl.ts b/frontend/src/app/[locale]/account/authControl.ts
index 347e54e..01392c9 100644
--- a/frontend/src/app/[locale]/account/authControl.ts
+++ b/frontend/src/app/[locale]/account/authControl.ts
@@ -1,5 +1,4 @@
 import { UserType } from '@/types/user';
-import { avatars } from '@/config/selection';
 import Config from '@/config/config';
 const apiServer = Config.apiServer;