Spaces:
Runtime error
Runtime error
File size: 3,486 Bytes
20256e7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import { Link, useLocation } from 'react-router-dom';
import { Database, MessageSquare, User, LogOut, Brain, X } from 'lucide-react';
import { useAuth } from '../../context/AuthContext';
import './Sidebar.css';
interface SidebarProps {
isOpen: boolean;
onClose: () => void;
}
const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
const { user, logout } = useAuth();
const location = useLocation();
const isActive = (path: string) => location.pathname.startsWith(path);
const navLinks = [
{ to: '/knowledge-bases', icon: Database, label: 'Knowledge Bases' },
{ to: '/assistants', icon: MessageSquare, label: 'Assistants' },
];
const handleNavClick = () => {
onClose();
};
return (
<>
<div
className={`sb-overlay ${isOpen ? 'sb-overlay-visible' : ''}`}
onClick={onClose}
aria-hidden="true"
/>
<aside className={`sb-sidebar ${isOpen ? 'sb-open' : ''}`}>
<div className="sb-header">
<Link to="/" className="sb-logo" onClick={handleNavClick}>
<div className="sb-logo-icon">
<Brain size={18} color="#fff" />
</div>
<span className="sb-logo-text">
Personal <span>RAG</span>
</span>
</Link>
<button
className="sb-close-btn"
onClick={onClose}
aria-label="Close sidebar"
>
<X size={20} />
</button>
</div>
<nav className="sb-nav" aria-label="Main navigation">
{navLinks.map(({ to, icon: Icon, label }) => (
<Link
key={to}
to={to}
className={`sb-nav-item ${isActive(to) ? 'sb-active' : ''}`}
onClick={handleNavClick}
>
<Icon size={19} />
<span>{label}</span>
</Link>
))}
</nav>
<div className="sb-footer">
<Link
to="/profile"
className={`sb-nav-item sb-profile-item ${isActive('/profile') ? 'sb-active' : ''}`}
onClick={handleNavClick}
>
<div className="sb-avatar">
{user?.full_name?.[0]?.toUpperCase() || user?.username?.[0]?.toUpperCase() || 'U'}
</div>
<div className="sb-profile-info">
<span className="sb-profile-name">
{user?.full_name || user?.username || 'User'}
</span>
<span className="sb-profile-email">{user?.email || ''}</span>
</div>
</Link>
<button onClick={logout} className="sb-nav-item sb-logout-btn">
<LogOut size={18} />
<span>Logout</span>
</button>
</div>
</aside>
</>
);
};
export default Sidebar;
|