Evandro Fonseca Junior
5c1ccbc69a
Added Tailwind CSS and tw-animate-css imports to globals.css. Introduced a custom dark variant and an extensive @theme inline block with CSS variables for colors, radii, and animations. Included keyframes for shimmer-slide, spin-around, gradient, shine, and background-position-spin to enable consistent theming and dynamic UI effects across the application.
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Menu } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { ThemeToggle } from "./theme-toggle";
|
|
import { LanguageSwitcher } from "./language-switcher";
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
|
|
interface MobileMenuProps {
|
|
links: Array<{ href: string; label: string }>;
|
|
}
|
|
|
|
export function MobileMenu({ links }: MobileMenuProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const t = useTranslations("header");
|
|
|
|
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>
|
|
);
|
|
}
|
|
|