From ec9e2da7bc229d682ac7b43669dd5386e008dee9 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 4 May 2024 08:13:50 +0900
Subject: [PATCH] Implemented language selection

---
 frontend/src/app/[locale]/Header.tsx     | 19 +++----------------
 frontend/src/app/[locale]/LangSwitch.tsx | 23 +++++++++++++++++++----
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/[locale]/Header.tsx b/frontend/src/app/[locale]/Header.tsx
index e8e366b..22b8e30 100644
--- a/frontend/src/app/[locale]/Header.tsx
+++ b/frontend/src/app/[locale]/Header.tsx
@@ -3,7 +3,7 @@ import {
   NavbarContent,
   NavbarBrand,
   NavbarItem,
-  Link as NextUiLink
+  Link as NextUiLink,
 } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
 import { siteConfig } from "@/config/site";
@@ -35,20 +35,7 @@ export default function Header(params: { locale: string }) {
             <p className="font-bold text-inherit">Test Case Manager</p>
           </Link>
         </NavbarBrand>
-        <ul className="hidden lg:flex gap-4 justify-start ml-2">
-          {siteConfig.navItems.map((item) => (
-            <NavbarItem key={item.href}>
-              <Link
-                className="data-[active=true]:text-primary data-[active=true]:font-medium"
-                href={item.href}
-                locale={params.locale}
-              >
-                {item.label}
-              </Link>
-            </NavbarItem>
-          ))}
-        </ul>
-        {/* {siteConfig.navItems.map((item) => (
+        {siteConfig.navItems.map((item) => (
           <NavbarItem key={item.href}>
             <Link
               className="data-[active=true]:text-primary data-[active=true]:font-medium"
@@ -58,7 +45,7 @@ export default function Header(params: { locale: string }) {
               {item.label}
             </Link>
           </NavbarItem>
-        ))} */}
+        ))}
       </NavbarContent>
 
       <NavbarContent className="basis-1 pl-4" justify="end">
diff --git a/frontend/src/app/[locale]/LangSwitch.tsx b/frontend/src/app/[locale]/LangSwitch.tsx
index 8cde304..68932c1 100644
--- a/frontend/src/app/[locale]/LangSwitch.tsx
+++ b/frontend/src/app/[locale]/LangSwitch.tsx
@@ -6,7 +6,8 @@ import {
   DropdownMenu,
   DropdownItem,
 } from "@nextui-org/react";
-import { Globe } from "lucide-react";
+import { Globe, ChevronDown } from "lucide-react";
+import { usePathname } from "next/navigation";
 import { useRouter } from "@/src/navigation";
 
 const locales = [
@@ -16,15 +17,29 @@ const locales = [
 
 export default function LangSwitch(params: { locale: string }) {
   const router = useRouter();
+  const pathname = usePathname();
 
-  async function changeLocale(locale: string) {
-    router.push("/", { locale: locale });
+  async function changeLocale(nextLocale: string) {
+    let newPathname;
+    if (params.locale.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 });
+    }
   }
 
   return (
     <Dropdown>
       <DropdownTrigger>
-        <Button size="sm" color="primary" startContent={<Globe size={16} />}>
+        <Button
+          size="sm"
+          variant="faded"
+          startContent={<Globe size={16} />}
+          endContent={<ChevronDown size={16} />}
+        >
           {locales.find((locale) => locale.code === params.locale)?.name ||
             params.locale}
         </Button>