wodey-prototype/components/Side_bar.tsx

"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>
  );
}