150 lines
6.7 KiB
TypeScript
150 lines
6.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
|
|
interface SidebarProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function Sidebar({ isOpen, onClose }: SidebarProps) {
|
|
const [isProjectsOpen, setIsProjectsOpen] = useState(false);
|
|
|
|
// Prevent scrolling when sidebar is open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "unset";
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = "unset";
|
|
};
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className={`fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? "opacity-100 visible" : "opacity-0 invisible"
|
|
}`}
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Sidebar */}
|
|
<div
|
|
className={`fixed top-0 right-0 bottom-0 z-[70] w-[300px] bg-white dark:bg-black border-l border-gray-200 dark:border-gray-800 shadow-2xl transform transition-transform duration-300 ease-in-out ${isOpen ? "translate-x-0" : "translate-x-full"
|
|
}`}
|
|
>
|
|
<div className="flex flex-col h-full p-6">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div className="relative w-40 h-12">
|
|
<Image
|
|
src="/assets/images/blue-logo.png"
|
|
alt="Sky and Soil Sidebar Logo"
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className="w-6 h-6"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="flex flex-col space-y-6">
|
|
<Link
|
|
href="/about"
|
|
className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
|
|
onClick={onClose}
|
|
>
|
|
About
|
|
</Link>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Link
|
|
href="/projects"
|
|
className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
|
|
onClick={onClose}
|
|
>
|
|
Projects
|
|
</Link>
|
|
<button
|
|
onClick={() => setIsProjectsOpen(!isProjectsOpen)}
|
|
className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className={`w-5 h-5 transition-transform duration-200 ${isProjectsOpen ? "rotate-180" : ""}`}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className={`overflow-hidden transition-all duration-300 ${isProjectsOpen ? "max-h-40 opacity-100" : "max-h-0 opacity-0"}`}>
|
|
<Link
|
|
href="/residential-real-estate"
|
|
className="block text-base font-medium text-gray-500 dark:text-gray-400 hover:text-primary transition-colors pl-4 py-2"
|
|
onClick={onClose}
|
|
>
|
|
Residential Real Estate
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/lifestyle"
|
|
className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
|
|
onClick={onClose}
|
|
>
|
|
Lifestyle
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="text-lg font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors"
|
|
onClick={onClose}
|
|
>
|
|
Contact
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="mt-auto space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
Theme
|
|
</span>
|
|
<ThemeToggle />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|