228 lines
8.4 KiB
TypeScript
228 lines
8.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { X, Phone, ChevronRight } from "lucide-react";
|
|
import { companyDetails } from "@/content/company";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface MobileMenuProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function MobileMenu({ isOpen, onClose }: MobileMenuProps) {
|
|
// Prevent body scrolling when menu is open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "";
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [isOpen]);
|
|
|
|
const hvacSections = [
|
|
{ label: "Ofertowana klimatyzacja", href: "/klimatyzacja" },
|
|
{ label: "Klimatyzatory ścienne", href: "/sklep?category=scienne" },
|
|
{ label: "Klimatyzatory multisplit", href: "/sklep?category=multisplit" },
|
|
{ label: "Klimatyzatory przenośne", href: "/sklep?category=przenosne" },
|
|
{ label: "Klimatyzatory kasetonowe", href: "/sklep?category=kasetonowe" },
|
|
{ label: "Klimatyzator konsolowe", href: "/sklep?category=konsolowe" },
|
|
{ label: "Montaż klimatyzacji", href: "/klimatyzacja" },
|
|
{ label: "Serwis i przeglądy", href: "/klimatyzacja" },
|
|
];
|
|
|
|
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"fixed inset-0 z-50 lg:hidden transition-all duration-300",
|
|
isOpen ? "pointer-events-auto" : "pointer-events-none"
|
|
)}
|
|
>
|
|
{/* Dark Overlay */}
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 bg-black/60 transition-opacity duration-300",
|
|
isOpen ? "opacity-100" : "opacity-0"
|
|
)}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Drawer Panel */}
|
|
<div
|
|
className={cn(
|
|
"absolute top-0 right-0 bottom-0 w-full max-w-sm bg-white shadow-xl flex flex-col transition-transform duration-300 ease-in-out",
|
|
isOpen ? "translate-x-0" : "translate-x-full"
|
|
)}
|
|
>
|
|
{/* Drawer Header */}
|
|
<div className="flex justify-between items-center px-6 py-4 border-b border-border">
|
|
<span className="text-xl font-bold font-heading text-primary">
|
|
Menu<span className="text-accent">.</span>
|
|
</span>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1 rounded-lg hover:bg-muted text-primary transition-colors focus:ring-2 focus:ring-accent outline-none"
|
|
aria-label="Zamknij menu"
|
|
>
|
|
<X className="size-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Drawer Content */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-4">
|
|
<div className="w-full">
|
|
{/* 1. Klimatyzacja */}
|
|
<details className="collapse collapse-arrow border-b border-border rounded-none">
|
|
<summary className="collapse-title text-sm font-medium text-primary hover:text-accent py-3 px-0 min-h-0">
|
|
Klimatyzacja
|
|
</summary>
|
|
<div className="collapse-content px-0 pb-2">
|
|
<ul className="flex flex-col gap-2.5 pl-4 pb-2">
|
|
{hvacSections.map((item, idx) => (
|
|
<li key={idx}>
|
|
<Link
|
|
href={item.href}
|
|
onClick={onClose}
|
|
className="text-sm text-text-muted hover:text-accent transition-colors flex items-center justify-between py-1"
|
|
>
|
|
<span>{item.label}</span>
|
|
<ChevronRight className="size-3.5 opacity-60" />
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
{/* 2. Pompy Ciepła */}
|
|
<div className="border-b border-border py-3">
|
|
<Link
|
|
href="/pompy-ciepla"
|
|
onClick={onClose}
|
|
className="text-sm font-medium text-primary hover:text-accent block"
|
|
>
|
|
Pompy ciepła
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Nowa sekcja: Miasta */}
|
|
<div className="border-b border-border py-3">
|
|
<details className="collapse collapse-arrow rounded-none">
|
|
<summary className="collapse-title text-sm font-medium text-primary hover:text-accent py-0 px-0 min-h-0">
|
|
Montaż w miastach
|
|
</summary>
|
|
<div className="collapse-content px-0 pb-2">
|
|
<ul className="flex flex-col gap-2 pl-4 pb-2 mt-2">
|
|
{[
|
|
{ label: "Klimatyzacja Wrocław", href: "/klimatyzacja/wroclaw" },
|
|
{ label: "Klimatyzacja Legnica", href: "/klimatyzacja/legnica" },
|
|
{ label: "Klimatyzacja Wałbrzych", href: "/klimatyzacja/walbrzych" },
|
|
{ label: "Klimatyzacja Jelenia Góra", href: "/klimatyzacja/jelenia-gora" },
|
|
{ label: "Klimatyzacja Lubin", href: "/klimatyzacja/lubin" },
|
|
{ label: "Klimatyzacja Głogów", href: "/klimatyzacja/glogow" },
|
|
{ label: "Klimatyzacja Świdnica", href: "/klimatyzacja/swidnica" },
|
|
{ label: "Klimatyzacja Oława", href: "/klimatyzacja/olawa" },
|
|
{ label: "Klimatyzacja Oleśnica", href: "/klimatyzacja/olesnica" },
|
|
{ label: "→ Wszystkie miasta", href: "/klimatyzacja#miasta" },
|
|
].map((item, idx) => (
|
|
<li key={idx}>
|
|
<Link
|
|
href={item.href}
|
|
onClick={onClose}
|
|
className="text-sm text-text-muted hover:text-accent transition-colors flex items-center justify-between py-1"
|
|
>
|
|
<span>{item.label}</span>
|
|
<ChevronRight className="size-3.5 opacity-60" />
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
{/* 3. Dobór urządzenia */}
|
|
<div className="border-b border-border py-3">
|
|
<Link
|
|
href="/kalkulator"
|
|
onClick={onClose}
|
|
className="text-sm font-medium text-primary hover:text-accent block"
|
|
>
|
|
Dobór urządzenia
|
|
</Link>
|
|
</div>
|
|
|
|
|
|
|
|
{/* 5. Blog */}
|
|
<div className="border-b border-border py-3">
|
|
<Link
|
|
href="/blog"
|
|
onClick={onClose}
|
|
className="text-sm font-medium text-primary hover:text-accent block"
|
|
>
|
|
Blog
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 6. O Nas */}
|
|
<div className="border-b border-border py-3">
|
|
<Link
|
|
href="/o-nas"
|
|
onClick={onClose}
|
|
className="text-sm font-medium text-primary hover:text-accent block"
|
|
>
|
|
O nas
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 7. Kontakt */}
|
|
<div className="border-b border-border py-3">
|
|
<Link
|
|
href="/kontakt"
|
|
onClick={onClose}
|
|
className="text-sm font-medium text-primary hover:text-accent block"
|
|
>
|
|
Kontakt
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 8. Zgłoś awarię */}
|
|
<div className="border-b border-border py-3">
|
|
<Link
|
|
href="/zgloszenie-awarii"
|
|
onClick={onClose}
|
|
className="text-sm font-bold text-red-600 hover:text-red-700 block"
|
|
>
|
|
Zgłoś awarię
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Drawer Footer */}
|
|
<div className="border-t border-border p-6 bg-slate-50 flex flex-col gap-4">
|
|
<a
|
|
href={`tel:${companyDetails.phoneRaw}`}
|
|
className="flex items-center justify-center gap-2 p-3 bg-white border border-border rounded-xl text-primary font-semibold hover:text-accent transition-colors shadow-sm"
|
|
>
|
|
<Phone className="size-4 text-accent" />
|
|
<span>Zadzwoń: {companyDetails.phone}</span>
|
|
</a>
|
|
<Link href="/kontakt" onClick={onClose}>
|
|
<button className="btn btn-primary w-full font-bold">
|
|
Darmowa konsultacja
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|