80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { Menu } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
import { useEffect, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
|
import { LanguageSwitcher } from "./language-switcher";
|
|
import { ThemeToggle } from "./theme-toggle";
|
|
|
|
interface MobileMenuProps {
|
|
links: Array<{ href: string; label: string }>;
|
|
}
|
|
|
|
export function MobileMenu({ links }: MobileMenuProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
const t = useTranslations("header");
|
|
|
|
// Evitar hydration mismatch com Radix UI
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
// Renderizar placeholder durante SSR para evitar mismatch
|
|
if (!mounted) {
|
|
return (
|
|
<Button variant="outline" size="icon" className="md:hidden" disabled>
|
|
<Menu className="h-[1.2rem] w-[1.2rem]" />
|
|
<span className="sr-only">{t("menu")}</span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon" className="md:hidden">
|
|
<Menu className="h-[1.2rem] w-[1.2rem]" />
|
|
<span className="sr-only">{t("menu")}</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
|
|
<div className="flex flex-col space-y-4 mt-4">
|
|
{/* Navigation Links */}
|
|
<div className="space-y-2">
|
|
{links.map(({ href, label }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className="block px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Theme and Language Controls */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">{t("theme.light")}</span>
|
|
<ThemeToggle />
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">{t("language")}</span>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|