68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { FiSearch, FiTarget, FiList, FiTrendingUp, FiDatabase, FiSettings } from 'react-icons/fi';
|
|
|
|
const navItems = [
|
|
{ href: '/', label: 'Scout', icon: FiSearch },
|
|
{ href: '/discoveries', label: 'Discoveries', icon: FiList },
|
|
{ href: '/deep-dives', label: 'Deep Dives', icon: FiTarget },
|
|
{ href: '/compare', label: 'Compare', icon: FiTrendingUp },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<aside className="w-64 bg-[#12121a] border-r border-[#1e1e2e] h-screen sticky top-0 flex flex-col">
|
|
{/* Logo */}
|
|
<div className="p-6 border-b border-[#1e1e2e]">
|
|
<Link href="/" className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-[#00d4ff] to-[#7c3aed] rounded-lg flex items-center justify-center">
|
|
<FiDatabase className="text-white text-xl" />
|
|
</div>
|
|
<div>
|
|
<h1 className="font-bold text-lg gradient-text">TECHSCOUT</h1>
|
|
<p className="text-xs text-gray-500">Technology Discovery</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-4">
|
|
<ul className="space-y-2">
|
|
{navItems.map(item => {
|
|
const isActive = pathname === item.href;
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<li key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
|
isActive
|
|
? 'bg-gradient-to-r from-[#00d4ff]/20 to-[#7c3aed]/20 text-[#00d4ff] border border-[#00d4ff]/30'
|
|
: 'text-gray-400 hover:text-white hover:bg-[#1e1e2e]'
|
|
}`}
|
|
>
|
|
<Icon className={isActive ? 'text-[#00d4ff]' : ''} />
|
|
<span className="font-medium">{item.label}</span>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 border-t border-[#1e1e2e]">
|
|
<div className="text-xs text-gray-500 text-center">
|
|
<p>TechScout v0.1.0</p>
|
|
<p className="mt-1">100% Local Processing</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|