75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import LocaleSwitcher from "@/components/LocaleSwitcher";
|
||
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
||
|
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuGroup,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuLabel,
|
||
|
|
DropdownMenuSeparator,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from "@/components/ui/dropdown-menu";
|
||
|
|
import { Link as I18nLink } from "@/i18n/routing";
|
||
|
|
import { HeaderLink } from "@/types/common";
|
||
|
|
import { Menu } from "lucide-react";
|
||
|
|
import { useTranslations } from "next-intl";
|
||
|
|
import Image from "next/image";
|
||
|
|
|
||
|
|
export default function MobileMenu() {
|
||
|
|
const t = useTranslations("Home");
|
||
|
|
const tHeader = useTranslations("Header");
|
||
|
|
|
||
|
|
const headerLinks: HeaderLink[] = tHeader.raw("links");
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-1 md:hidden">
|
||
|
|
<LocaleSwitcher />
|
||
|
|
<ThemeToggle />
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger className="p-2">
|
||
|
|
<Menu className="h-5 w-5" />
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="end" className="w-64">
|
||
|
|
<DropdownMenuLabel>
|
||
|
|
<I18nLink
|
||
|
|
href="/"
|
||
|
|
title={t("title")}
|
||
|
|
prefetch={true}
|
||
|
|
className="flex items-center space-x-1 font-bold"
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
alt={t("title")}
|
||
|
|
src="/logo.svg"
|
||
|
|
className="w-6 h-6"
|
||
|
|
width={32}
|
||
|
|
height={32}
|
||
|
|
/>
|
||
|
|
<span className="highlight-text">{t("title")}</span>
|
||
|
|
</I18nLink>
|
||
|
|
</DropdownMenuLabel>
|
||
|
|
<DropdownMenuSeparator />
|
||
|
|
<DropdownMenuGroup>
|
||
|
|
{headerLinks.map((link) => (
|
||
|
|
<DropdownMenuItem key={link.name}>
|
||
|
|
<I18nLink
|
||
|
|
href={link.href}
|
||
|
|
title={link.name}
|
||
|
|
prefetch={
|
||
|
|
link.target && link.target === "_blank" ? false : true
|
||
|
|
}
|
||
|
|
target={link.target || "_self"}
|
||
|
|
rel={link.rel || undefined}
|
||
|
|
>
|
||
|
|
{link.name}
|
||
|
|
</I18nLink>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
))}
|
||
|
|
</DropdownMenuGroup>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|