whyrating-engine-legacy/web/components/Sidebar.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useJobs } from '@/contexts/JobsContext';

export default function Sidebar() {
  const pathname = usePathname();
  const { jobs } = useJobs();

  const navItems = [
    {
      href: '/dashboard',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
      ),
      label: 'Home',
      matchPaths: ['/dashboard'],
    },
    {
      href: '/new',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
        </svg>
      ),
      label: 'New',
      matchPaths: ['/new'],
    },
    {
      href: '/jobs',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
      ),
      label: 'Jobs',
      matchPaths: ['/jobs'],
      badge: jobs.length > 0 ? jobs.length : undefined,
    },
    {
      href: '/analytics',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
      ),
      label: 'Analytics',
      matchPaths: ['/analytics'],
    },
    {
      href: '/dashboard/scrapers',
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
      ),
      label: 'Scrapers',
      matchPaths: ['/dashboard/scrapers'],
    },
  ];

  const isActive = (item: typeof navItems[0]) => {
    // Check if current path starts with any of the match paths
    return item.matchPaths.some(path => pathname.startsWith(path));
  };

  return (
    <div className="w-20 bg-gray-900 flex flex-col items-center py-6 gap-2">
      {navItems.map((item) => (
        <Link
          key={item.href}
          href={item.href}
          className={`relative w-14 h-14 rounded-xl flex flex-col items-center justify-center gap-1 transition-all ${
            isActive(item)
              ? 'bg-blue-600 text-white shadow-lg'
              : 'text-gray-400 hover:bg-gray-800 hover:text-white'
          }`}
          title={item.label}
        >
          {item.icon}
          <span className="text-[10px] font-medium">{item.label}</span>
          {item.badge !== undefined && (
            <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
              {item.badge > 99 ? '99+' : item.badge}
            </span>
          )}
        </Link>
      ))}
    </div>
  );
}