feat: complete website implementation
This commit is contained in:
Radosław Smoliński
@@ -0,0 +1,206 @@
|
||||
"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" },
|
||||
];
|
||||
|
||||
const homeServices = [
|
||||
{ label: "Wszystkie usługi domowe", href: "/uslugi-domowe" },
|
||||
{ label: "Remonty i wykończenia", href: "/uslugi-domowe/remonty" },
|
||||
{ label: "Hydraulika i instalacje", href: "/uslugi-domowe/hydraulika" },
|
||||
{ label: "Serwis AGD / Lodówki", href: "/uslugi-domowe/serwis-agd" },
|
||||
];
|
||||
|
||||
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>
|
||||
|
||||
{/* 3. Usługi Domowe */}
|
||||
<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">
|
||||
Usługi domowe
|
||||
</summary>
|
||||
<div className="collapse-content px-0 pb-2">
|
||||
<ul className="flex flex-col gap-2.5 pl-4 pb-2">
|
||||
{homeServices.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>
|
||||
|
||||
{/* 4. Realizacje */}
|
||||
<div className="border-b border-border py-3">
|
||||
<Link
|
||||
href="/realizacje"
|
||||
onClick={onClose}
|
||||
className="text-sm font-medium text-primary hover:text-accent block"
|
||||
>
|
||||
Realizacje
|
||||
</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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user