You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.6 KiB
50 lines
1.6 KiB
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Brain, Search, MessageSquare, Tag, GitGraph, Home } from 'lucide-react';
|
|
import clsx from 'clsx';
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: '/', label: 'Home', icon: Home },
|
|
{ href: '/search', label: 'Search', icon: Search },
|
|
{ href: '/chat', label: 'Chat', icon: MessageSquare },
|
|
{ href: '/tags', label: 'Tags', icon: Tag },
|
|
{ href: '/graph', label: 'Graph', icon: GitGraph },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<aside className="w-56 shrink-0 bg-slate-900 text-slate-300 flex flex-col h-screen">
|
|
<div className="flex items-center gap-2.5 px-5 py-5 border-b border-slate-700">
|
|
<Brain size={22} className="text-brain-400" />
|
|
<span className="font-bold text-white text-lg">Second Brain</span>
|
|
</div>
|
|
|
|
<nav className="flex-1 py-4 space-y-1 px-2">
|
|
{NAV_ITEMS.map(({ href, label, icon: Icon }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={clsx(
|
|
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
|
pathname === href
|
|
? 'bg-brain-700 text-white'
|
|
: 'hover:bg-slate-800 hover:text-white',
|
|
)}
|
|
>
|
|
<Icon size={16} />
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="px-4 py-4 border-t border-slate-700 text-xs text-slate-500">
|
|
AI Second Brain v1.0.0
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|