73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
// Navigation links configuration
|
|
const links = [
|
|
{
|
|
icon: "/home-icon.png",
|
|
label: "Home",
|
|
path: "/"
|
|
},
|
|
{
|
|
icon: "/design-icon.png",
|
|
label: "Design St.",
|
|
path: "/design"
|
|
}
|
|
];
|
|
|
|
/**
|
|
* Sidebar Component
|
|
* Displays a vertical navigation sidebar with icons and labels
|
|
*/
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
|
|
<div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
|
|
{/* Menu Icon */}
|
|
<div className="flex md:flex-col items-center gap-4 md:gap-6">
|
|
<div
|
|
className="cursor-pointer hover:opacity-80 transition-opacity duration-200"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<Image
|
|
src="/menu-icon.png"
|
|
alt="logo"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
</div>
|
|
|
|
{/* Navigation Links */}
|
|
{links.map((link) => (
|
|
<div
|
|
key={link.path}
|
|
className={`flex flex-col items-center cursor-pointer group`}
|
|
>
|
|
{/* Link Icon Container */}
|
|
<div className={`p-2 rounded-lg transition-colors duration-200 ${pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50'}`}>
|
|
<Image
|
|
src={link.icon}
|
|
alt={link.label}
|
|
width={24}
|
|
height={24}
|
|
className="group-hover:opacity-80 transition-opacity duration-200"
|
|
/>
|
|
</div>
|
|
|
|
{/* Link Label */}
|
|
<p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4'} group-hover:opacity-80`}>
|
|
{link.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |