frontend/src/components/Sidebar.tsx

import { Link, useLocation } from 'react-router-dom'
export default function Sidebar(){const { pathname } = useLocation(); const item=(to:string,label:string)=> (<Link to={to} className={`block px-3 py-2 rounded-xl border mb-2 ${pathname===to?'border-sky-400 bg-sky-400/10':'border-slate-700 bg-slate-800/40'}`}>{label}</Link>); return (<aside className="w-64 p-4 border-r border-slate-800 bg-slate-900/60"><div className="font-extrabold tracking-widest text-xl mb-3">CHB</div>{item('/chat','💬 Chat')}{item('/apikeys','🔑 API Keys')}{item('/about','ℹ️ About Us')}{item('/howto','❓ How to Use')}<button onClick={()=>{localStorage.removeItem('token'); location.href='/login'}} className="mt-2 w-full px-3 py-2 rounded-xl border border-red-700 bg-red-900/40">⎋ Logout</button></aside>)}