Fixed drawer not closing when a link in a drawer is pressed

2024-05-21 21:47:19 +09:00
parent c40a2440ba
commit 704f20239e
4 changed files with 159 additions and 127 deletions
--- a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
+++ 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>
+  );
+}