Implemented language selection

This commit is contained in:
Takeshi Kimata
2024-05-04 08:13:50 +09:00
parent e25acad76c
commit ec9e2da7bc
2 changed files with 22 additions and 20 deletions

View File

@@ -3,7 +3,7 @@ import {
NavbarContent, NavbarContent,
NavbarBrand, NavbarBrand,
NavbarItem, NavbarItem,
Link as NextUiLink Link as NextUiLink,
} from "@nextui-org/react"; } from "@nextui-org/react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { siteConfig } from "@/config/site"; import { siteConfig } from "@/config/site";
@@ -35,7 +35,6 @@ export default function Header(params: { locale: string }) {
<p className="font-bold text-inherit">Test Case Manager</p> <p className="font-bold text-inherit">Test Case Manager</p>
</Link> </Link>
</NavbarBrand> </NavbarBrand>
<ul className="hidden lg:flex gap-4 justify-start ml-2">
{siteConfig.navItems.map((item) => ( {siteConfig.navItems.map((item) => (
<NavbarItem key={item.href}> <NavbarItem key={item.href}>
<Link <Link
@@ -47,18 +46,6 @@ export default function Header(params: { locale: string }) {
</Link> </Link>
</NavbarItem> </NavbarItem>
))} ))}
</ul>
{/* {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>
))} */}
</NavbarContent> </NavbarContent>
<NavbarContent className="basis-1 pl-4" justify="end"> <NavbarContent className="basis-1 pl-4" justify="end">

View File

@@ -6,7 +6,8 @@ import {
DropdownMenu, DropdownMenu,
DropdownItem, DropdownItem,
} from "@nextui-org/react"; } 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"; import { useRouter } from "@/src/navigation";
const locales = [ const locales = [
@@ -16,15 +17,29 @@ const locales = [
export default function LangSwitch(params: { locale: string }) { export default function LangSwitch(params: { locale: string }) {
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
async function changeLocale(locale: string) { async function changeLocale(nextLocale: string) {
router.push("/", { locale: locale }); 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 ( return (
<Dropdown> <Dropdown>
<DropdownTrigger> <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 || {locales.find((locale) => locale.code === params.locale)?.name ||
params.locale} params.locale}
</Button> </Button>