Implemented language selection
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user