135 lines
5.1 KiB
TypeScript
135 lines
5.1 KiB
TypeScript
'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: '/reports',
|
|
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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
),
|
|
label: 'Reports',
|
|
matchPaths: ['/reports'],
|
|
},
|
|
{
|
|
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: '/pipelines',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
|
</svg>
|
|
),
|
|
label: 'Pipelines',
|
|
matchPaths: ['/pipelines'],
|
|
},
|
|
{
|
|
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'],
|
|
},
|
|
{
|
|
href: '/taxonomy/urt/v5-1',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
|
|
</svg>
|
|
),
|
|
label: 'Taxonomy',
|
|
matchPaths: ['/taxonomy'],
|
|
},
|
|
{
|
|
href: '/categories',
|
|
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 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
</svg>
|
|
),
|
|
label: 'GBP Cats',
|
|
matchPaths: ['/categories'],
|
|
},
|
|
];
|
|
|
|
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>
|
|
);
|
|
}
|