62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
|
||
|
|
// 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();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-[#050616] w-full md:w-[80px] h-auto md:h-screen">
|
||
|
|
<div className="flex md:flex-col items-center justify-between md:justify-start gap-4 p-4 md:pt-10">
|
||
|
|
{/* Menu Icon */}
|
||
|
|
<Image
|
||
|
|
src="/menu-icon.png"
|
||
|
|
alt="logo"
|
||
|
|
width={24}
|
||
|
|
height={24}
|
||
|
|
className="cursor-pointer"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Navigation Links */}
|
||
|
|
<div className="flex md:flex-col items-center md:items-start gap-4 md:gap-6 md:mt-10 w-full md:w-auto px-4">
|
||
|
|
{links.map((link) => (
|
||
|
|
<div key={link.path} className="flex flex-col items-center md:items-start w-auto">
|
||
|
|
{/* Link Icon Container */}
|
||
|
|
<div className={`p-2 rounded-lg ${pathname === link.path ? 'bg-[#1a1c2b]' : ''}`}>
|
||
|
|
<Image
|
||
|
|
src={link.icon}
|
||
|
|
alt={link.label}
|
||
|
|
width={24}
|
||
|
|
height={24}
|
||
|
|
className="cursor-pointer"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Link Label */}
|
||
|
|
<p className="text-white text-xs mt-1 hidden md:block">{link.label}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|