This commit is contained in:
deonisii
2026-04-17 03:15:47 +03:00
commit d769ac602b
29 changed files with 8242 additions and 0 deletions

165
components/mobile-menu.tsx Normal file
View File

@@ -0,0 +1,165 @@
"use client";
import Link from "next/link";
import { Menu, X, Send, MessageCircle, FileText } from "lucide-react";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
type NavLink = {
href: string;
label: string;
};
export default function MobileMenu({
navLinks,
}: {
navLinks: NavLink[];
}) {
const [mobileOpen, setMobileOpen] = useState(false);
const pathname = usePathname();
useEffect(() => {
if (mobileOpen) {
document.body.style.overflow = "hidden";
document.documentElement.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
document.documentElement.style.overflow = "";
}
return () => {
document.body.style.overflow = "";
document.documentElement.style.overflow = "";
};
}, [mobileOpen]);
return (
<>
<button
type="button"
onClick={() => setMobileOpen(true)}
className="md:hidden inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-3 py-2 hover:bg-white/10 transition-colors"
aria-label="Открыть меню"
>
<Menu className="w-5 h-5" />
</button>
{mobileOpen && (
<div className="fixed inset-0 z-[999] md:hidden bg-black">
<div className="flex h-full flex-col bg-black">
<div className="flex items-center justify-between px-4 py-4 border-b border-white/10">
<div>
<div className="text-2xl font-bold leading-none">WorkParking</div>
<div className="mt-2 text-sm text-neutral-500">
Апгрейд дворовых шлагбаумов
</div>
</div>
<button
type="button"
onClick={() => setMobileOpen(false)}
className="inline-flex items-center justify-center rounded-xl border border-white/10 p-2 text-neutral-300 hover:bg-white/5 hover:text-white transition-colors"
aria-label="Закрыть меню"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="flex-1 overflow-y-auto px-4 py-6">
<Link
href="/contacts"
onClick={() => setMobileOpen(false)}
className="mb-8 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-4 py-4 text-base font-semibold text-white hover:bg-emerald-500 transition-colors"
>
<FileText className="w-5 h-5" />
Оставить заявку
</Link>
<nav className="flex flex-col">
{navLinks.map((link) => {
const isActive = pathname === link.href;
return (
<Link
key={link.href}
href={link.href}
onClick={() => setMobileOpen(false)}
className={[
"border-b border-white/10 py-4 text-lg transition-colors",
isActive
? "text-emerald-300"
: "text-white hover:text-emerald-300",
].join(" ")}
>
{link.label}
</Link>
);
})}
</nav>
<div className="mt-10">
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
Контакты
</div>
<div className="flex flex-col gap-3 text-base">
<a
href="tel:+79999698149"
className="text-neutral-200 hover:text-emerald-300 transition-colors"
>
+7 (999) 969-81-49
</a>
<a
href="mailto:sale@parkflow.ru"
className="text-neutral-200 hover:text-emerald-300 transition-colors"
>
sale@parkflow.ru
</a>
<a
href="mailto:info@parkflow.ru"
className="text-neutral-200 hover:text-emerald-300 transition-colors"
>
info@parkflow.ru
</a>
</div>
</div>
<div className="mt-10">
<div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
Мы в сети
</div>
<div className="flex flex-col gap-3 text-base">
<a
href="#"
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
>
VK
</a>
<a
href="#"
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
>
<Send className="w-4 h-4" />
Telegram
</a>
<a
href="#"
className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
>
<MessageCircle className="w-4 h-4" />
MAX
</a>
</div>
</div>
<div className="mt-10 pb-6 text-sm text-neutral-500">
ООО «Пракфлоу» ИНН 7777773333
</div>
</div>
</div>
</div>
)}
</>
);
}